From 8f76893fac477609fedb07c785ebd4bced3eb70c Mon Sep 17 00:00:00 2001 From: Sungmin Park Date: Fri, 8 Feb 2019 18:02:59 +0900 Subject: [PATCH] [Grid] Use a unitless spacing API (#14099) * [Grid] Apply theme.spacing.unit to grid spacing * support custom transformations * <3 for the review * Multiple arity --- .size-limit.js | 14 ++-- docs/src/modules/components/Ad.js | 8 +-- docs/src/modules/components/AppContent.js | 12 ++-- docs/src/modules/components/AppDrawer.js | 4 +- docs/src/modules/components/AppSearch.js | 9 ++- .../modules/components/AppTableOfContents.js | 7 +- docs/src/modules/components/AppTheme.js | 4 +- docs/src/modules/components/Carbon.js | 7 +- docs/src/modules/components/CodeFund.js | 7 +- docs/src/modules/components/Demo.js | 16 ++--- docs/src/modules/components/HomeBackers.js | 4 +- docs/src/modules/components/HomeFooter.js | 12 ++-- docs/src/modules/components/HomeSteps.js | 18 ++--- docs/src/modules/components/MarkdownDocs.js | 6 +- docs/src/modules/components/Tidelift.js | 5 +- .../default-theme/DefaultTheme.js | 6 +- .../pages/customization/themes/WithTheme.js | 4 +- docs/src/pages/customization/themes/themes.md | 52 +++++++++++++- docs/src/pages/demos/app-bar/BottomAppBar.js | 8 +-- docs/src/pages/demos/app-bar/BottomAppBar.tsx | 8 +-- .../app-bar/PrimarySearchAppBar.hooks.js | 14 ++-- .../demos/app-bar/PrimarySearchAppBar.js | 14 ++-- .../demos/app-bar/PrimarySearchAppBar.tsx | 14 ++-- docs/src/pages/demos/app-bar/SearchAppBar.js | 12 ++-- docs/src/pages/demos/app-bar/SearchAppBar.tsx | 12 ++-- .../autocomplete/IntegrationAutosuggest.js | 4 +- .../IntegrationDownshift.hooks.js | 6 +- .../autocomplete/IntegrationDownshift.js | 6 +- .../IntegrationReactSelect.hooks.js | 8 +-- .../autocomplete/IntegrationReactSelect.js | 8 +-- docs/src/pages/demos/badges/BadgeMax.js | 4 +- .../demos/badges/BadgeVisibility.hooks.js | 4 +- .../src/pages/demos/badges/BadgeVisibility.js | 4 +- docs/src/pages/demos/badges/DotBadge.js | 2 +- docs/src/pages/demos/badges/SimpleBadge.js | 4 +- .../demos/breadcrumbs/CollapsedBreadcrumbs.js | 2 +- .../demos/breadcrumbs/CustomSeparator.js | 2 +- .../breadcrumbs/CustomizedBreadcrumbs.js | 4 +- .../demos/breadcrumbs/IconBreadcrumbs.js | 4 +- .../demos/breadcrumbs/RouterBreadcrumbs.js | 4 +- .../demos/breadcrumbs/SimpleBreadcrumbs.js | 2 +- docs/src/pages/demos/buttons/ButtonBases.js | 2 +- docs/src/pages/demos/buttons/ButtonSizes.js | 4 +- .../pages/demos/buttons/ContainedButtons.js | 2 +- .../pages/demos/buttons/CustomizedButtons.js | 2 +- .../buttons/FloatingActionButtonZoom.hooks.js | 4 +- .../demos/buttons/FloatingActionButtonZoom.js | 4 +- .../demos/buttons/FloatingActionButtons.js | 4 +- docs/src/pages/demos/buttons/IconButtons.js | 2 +- .../pages/demos/buttons/IconLabelButtons.js | 6 +- .../pages/demos/buttons/OutlinedButtons.js | 2 +- docs/src/pages/demos/buttons/TextButtons.js | 2 +- .../src/pages/demos/cards/MediaControlCard.js | 4 +- docs/src/pages/demos/chips/Chips.js | 2 +- .../src/pages/demos/chips/ChipsArray.hooks.js | 4 +- docs/src/pages/demos/chips/ChipsArray.js | 4 +- docs/src/pages/demos/chips/ChipsPlayground.js | 8 +-- docs/src/pages/demos/chips/OutlinedChips.js | 2 +- .../pages/demos/dialogs/CustomizedDialog.js | 10 +-- .../src/pages/demos/dialogs/MaxWidthDialog.js | 4 +- .../pages/demos/dividers/MiddleDividers.js | 8 +-- .../pages/demos/dividers/SubheaderDividers.js | 4 +- docs/src/pages/demos/drawers/ClippedDrawer.js | 2 +- .../pages/demos/drawers/MiniDrawer.hooks.js | 6 +- docs/src/pages/demos/drawers/MiniDrawer.js | 6 +- .../demos/drawers/PermanentDrawerLeft.js | 2 +- .../demos/drawers/PermanentDrawerRight.js | 2 +- .../drawers/PersistentDrawerLeft.hooks.js | 2 +- .../demos/drawers/PersistentDrawerLeft.js | 2 +- .../drawers/PersistentDrawerRight.hooks.js | 2 +- .../demos/drawers/PersistentDrawerRight.js | 2 +- .../demos/drawers/ResponsiveDrawer.hooks.js | 2 +- .../pages/demos/drawers/ResponsiveDrawer.js | 2 +- .../CustomizedExpansionPanel.js | 2 +- .../DetailedExpansionPanel.js | 2 +- .../demos/lists/InteractiveList.hooks.js | 6 +- docs/src/pages/demos/lists/InteractiveList.js | 6 +- .../src/pages/demos/lists/NestedList.hooks.js | 2 +- docs/src/pages/demos/lists/NestedList.js | 2 +- .../demos/menus/MenuListComposition.hooks.js | 2 +- .../pages/demos/menus/MenuListComposition.js | 2 +- docs/src/pages/demos/paper/PaperSheet.js | 4 +- .../pages/demos/pickers/DateAndTimePickers.js | 4 +- docs/src/pages/demos/pickers/DatePickers.js | 4 +- docs/src/pages/demos/pickers/TimePickers.js | 4 +- .../progress/CircularDeterminate.hooks.js | 2 +- .../demos/progress/CircularDeterminate.js | 2 +- .../demos/progress/CircularIndeterminate.js | 2 +- .../progress/CircularIntegration.hooks.js | 2 +- .../demos/progress/CircularIntegration.js | 2 +- .../demos/progress/CircularStatic.hooks.js | 2 +- .../pages/demos/progress/CircularStatic.js | 2 +- .../demos/progress/CustomizedProgress.js | 4 +- .../progress/DelayingAppearance.hooks.js | 2 +- .../demos/progress/DelayingAppearance.js | 2 +- .../CheckboxesGroup.hooks.js | 2 +- .../selection-controls/CheckboxesGroup.js | 2 +- .../RadioButtonsGroup.hooks.js | 4 +- .../selection-controls/RadioButtonsGroup.js | 4 +- .../selects/ControlledOpenSelect.hooks.js | 4 +- .../demos/selects/ControlledOpenSelect.js | 4 +- .../pages/demos/selects/CustomizedSelects.js | 4 +- .../pages/demos/selects/DialogSelect.hooks.js | 2 +- docs/src/pages/demos/selects/DialogSelect.js | 2 +- .../demos/selects/MultipleSelect.hooks.js | 6 +- .../src/pages/demos/selects/MultipleSelect.js | 6 +- .../demos/selects/NativeSelects.hooks.js | 4 +- docs/src/pages/demos/selects/NativeSelects.js | 4 +- .../pages/demos/selects/SimpleSelect.hooks.js | 4 +- docs/src/pages/demos/selects/SimpleSelect.js | 4 +- .../demos/snackbars/ConsecutiveSnackbars.js | 2 +- .../snackbars/CustomizedSnackbars.hooks.js | 4 +- .../demos/snackbars/CustomizedSnackbars.js | 4 +- .../snackbars/FabIntegrationSnackbar.hooks.js | 6 +- .../demos/snackbars/FabIntegrationSnackbar.js | 6 +- .../pages/demos/snackbars/LongTextSnackbar.js | 2 +- .../demos/snackbars/SimpleSnackbar.hooks.js | 2 +- .../pages/demos/snackbars/SimpleSnackbar.js | 2 +- .../demos/steppers/CustomizedStepper.hooks.js | 6 +- .../pages/demos/steppers/CustomizedStepper.js | 6 +- ...ntalLinearAlternativeLabelStepper.hooks.js | 6 +- ...HorizontalLinearAlternativeLabelStepper.js | 6 +- .../steppers/HorizontalLinearStepper.hooks.js | 6 +- .../demos/steppers/HorizontalLinearStepper.js | 6 +- ...lNonLinearAlternativeLabelStepper.hooks.js | 8 +-- ...izontalNonLinearAlternativeLabelStepper.js | 8 +-- .../HorizontalNonLinearStepper.hooks.js | 6 +- .../steppers/HorizontalNonLinearStepper.js | 6 +- ...rizontalNonLinearStepperWithError.hooks.js | 6 +- .../HorizontalNonLinearStepperWithError.js | 6 +- .../SwipeableTextMobileStepper.hooks.js | 2 +- .../steppers/SwipeableTextMobileStepper.js | 2 +- .../demos/steppers/TextMobileStepper.hooks.js | 2 +- .../pages/demos/steppers/TextMobileStepper.js | 2 +- .../steppers/VerticalLinearStepper.hooks.js | 8 +-- .../demos/steppers/VerticalLinearStepper.js | 8 +-- .../CustomPaginationActionsTable.hooks.js | 4 +- .../tables/CustomPaginationActionsTable.js | 4 +- .../src/pages/demos/tables/CustomizedTable.js | 2 +- .../pages/demos/tables/EnhancedTable.hooks.js | 4 +- docs/src/pages/demos/tables/EnhancedTable.js | 4 +- docs/src/pages/demos/tables/SimpleTable.js | 2 +- docs/src/pages/demos/tables/SpanningTable.js | 2 +- .../pages/demos/tabs/CustomizedTabs.hooks.js | 4 +- docs/src/pages/demos/tabs/CustomizedTabs.js | 4 +- .../demos/text-fields/ComposedTextField.js | 2 +- .../demos/text-fields/ComposedTextField.tsx | 2 +- .../demos/text-fields/CustomizedInputs.js | 4 +- .../demos/text-fields/CustomizedInputs.tsx | 4 +- .../FilledInputAdornments.hooks.js | 2 +- .../text-fields/FilledInputAdornments.js | 2 +- .../text-fields/FilledInputAdornments.tsx | 2 +- .../text-fields/FilledTextFields.hooks.js | 4 +- .../demos/text-fields/FilledTextFields.js | 4 +- .../demos/text-fields/FilledTextFields.tsx | 4 +- .../text-fields/FormattedInputs.hooks.js | 2 +- .../demos/text-fields/FormattedInputs.js | 2 +- .../demos/text-fields/FormattedInputs.tsx | 2 +- .../text-fields/InputAdornments.hooks.js | 4 +- .../demos/text-fields/InputAdornments.js | 4 +- .../demos/text-fields/InputAdornments.tsx | 4 +- .../pages/demos/text-fields/InputWithIcon.js | 4 +- .../pages/demos/text-fields/InputWithIcon.tsx | 4 +- docs/src/pages/demos/text-fields/Inputs.js | 2 +- docs/src/pages/demos/text-fields/Inputs.tsx | 2 +- .../OutlinedInputAdornments.hooks.js | 2 +- .../text-fields/OutlinedInputAdornments.js | 2 +- .../text-fields/OutlinedInputAdornments.tsx | 2 +- .../text-fields/OutlinedTextFields.hooks.js | 6 +- .../demos/text-fields/OutlinedTextFields.js | 6 +- .../demos/text-fields/OutlinedTextFields.tsx | 6 +- .../demos/text-fields/TextFieldMargins.js | 4 +- .../demos/text-fields/TextFieldMargins.tsx | 4 +- .../demos/text-fields/TextFields.hooks.js | 4 +- .../src/pages/demos/text-fields/TextFields.js | 4 +- .../pages/demos/text-fields/TextFields.tsx | 4 +- .../tooltips/CustomizedTooltips.hooks.js | 2 +- .../demos/tooltips/CustomizedTooltips.js | 2 +- .../demos/tooltips/InteractiveTooltips.js | 2 +- .../demos/tooltips/PositionedTooltips.js | 2 +- .../pages/demos/tooltips/SimpleTooltips.js | 6 +- .../src/pages/demos/tooltips/VariableWidth.js | 8 +-- .../pages/discover-more/showcase/Showcase.js | 10 +-- docs/src/pages/discover-more/team/Team.js | 12 ++-- .../PageLayoutExamples.js | 2 +- .../page-layout-examples/album/Album.js | 20 +++--- .../page-layout-examples/blog/Blog.js | 26 +++---- .../page-layout-examples/blog/Markdown.js | 2 +- .../checkout/AddressForm.js | 2 +- .../page-layout-examples/checkout/Checkout.js | 26 +++---- .../checkout/PaymentForm.js | 2 +- .../page-layout-examples/checkout/Review.js | 6 +- .../dashboard/Dashboard.js | 8 +-- .../page-layout-examples/pricing/Pricing.js | 20 +++--- .../page-layout-examples/sign-in/SignIn.js | 16 ++--- .../pages/guides/right-to-left/RtlOptOut.js | 4 +- .../pages/lab/speed-dial/OpenIconSpeedDial.js | 4 +- .../lab/speed-dial/SpeedDialTooltipOpen.js | 4 +- docs/src/pages/lab/speed-dial/SpeedDials.js | 12 ++-- .../pages/lab/toggle-button/ToggleButtons.js | 6 +- .../pages/layout/breakpoints/MediaQuery.js | 2 +- .../pages/layout/breakpoints/breakpoints.md | 2 +- docs/src/pages/layout/grid/AutoGrid.js | 6 +- docs/src/pages/layout/grid/AutoGridNoWrap.js | 12 ++-- docs/src/pages/layout/grid/CSSGrid.js | 10 +-- docs/src/pages/layout/grid/CenteredGrid.js | 4 +- docs/src/pages/layout/grid/ComplexGrid.js | 6 +- docs/src/pages/layout/grid/FullWidthGrid.js | 4 +- docs/src/pages/layout/grid/InteractiveGrid.js | 8 +-- docs/src/pages/layout/grid/NestedGrid.js | 10 +-- docs/src/pages/layout/grid/SpacingGrid.js | 19 +++-- docs/src/pages/layout/grid/grid-zh.md | 4 +- docs/src/pages/layout/grid/grid.md | 9 ++- .../src/pages/layout/hidden/BreakpointDown.js | 4 +- .../src/pages/layout/hidden/BreakpointOnly.js | 4 +- docs/src/pages/layout/hidden/BreakpointUp.js | 4 +- .../pages/layout/hidden/GridIntegration.js | 4 +- .../src/pages/premium-themes/PremiumThemes.js | 2 +- .../instapaper/pages/instapaper/Profile.js | 4 +- .../theme/instapaper/components/button.js | 4 +- .../theme/instapaper/components/icon.js | 2 +- .../theme/instapaper/components/tabs.js | 4 +- .../theme/instapaper/components/typography.js | 6 +- .../onepirate/ForgotPassword.js | 8 +-- .../pages/premium-themes/onepirate/SignIn.js | 8 +-- .../pages/premium-themes/onepirate/SignUp.js | 10 +-- .../onepirate/modules/components/Button.js | 6 +- .../modules/components/LayoutBody.js | 24 +++---- .../onepirate/modules/components/Markdown.js | 2 +- .../onepirate/modules/components/Paper.js | 2 +- .../onepirate/modules/components/Snackbar.js | 6 +- .../onepirate/modules/components/TextField.js | 12 ++-- .../modules/components/Typography.js | 8 +-- .../onepirate/modules/form/FormFeedback.js | 2 +- .../onepirate/modules/views/AppAppBar.js | 2 +- .../onepirate/modules/views/AppFooter.js | 16 ++--- .../onepirate/modules/views/AppForm.js | 4 +- .../onepirate/modules/views/ProductCTA.js | 10 +-- .../modules/views/ProductCategories.js | 8 +-- .../onepirate/modules/views/ProductHero.js | 8 +-- .../modules/views/ProductHeroLayout.js | 6 +- .../modules/views/ProductHowItWorks.js | 16 ++--- .../modules/views/ProductSmokingHero.js | 10 +-- .../onepirate/modules/views/ProductValues.js | 12 ++-- .../pages/premium-themes/paperbase/Content.js | 4 +- .../pages/premium-themes/paperbase/Header.js | 6 +- .../premium-themes/paperbase/Navigator.js | 2 +- .../premium-themes/paperbase/Paperbase.js | 4 +- .../tweeper/components/tweeper/Header.js | 2 +- .../tweeper/components/tweeper/Tweet.js | 6 +- .../tweeper/pages/tweeper/Profile.js | 4 +- .../theme/tweeper/components/button.js | 4 +- .../theme/tweeper/components/typography.js | 4 +- .../tweeper/theme/tweeper/variables.js | 4 +- docs/src/pages/style/color/Color.js | 2 +- docs/src/pages/style/color/ColorDemo.js | 6 +- docs/src/pages/style/color/ColorTool.js | 14 ++-- docs/src/pages/style/icons/FontAwesome.js | 4 +- docs/src/pages/style/icons/Icons.js | 4 +- docs/src/pages/style/icons/SvgIcons.js | 4 +- .../src/pages/style/icons/SvgMaterialIcons.js | 2 +- docs/src/pages/style/links/Links.js | 2 +- .../pages/style/typography/TypographyTheme.js | 2 +- docs/src/pages/system/basics/RealWorld.js | 4 +- .../utils/click-away-listener/ClickAway.js | 6 +- docs/src/pages/utils/modal/SimpleModal.js | 4 +- docs/src/pages/utils/no-ssr/SimpleNoSsr.js | 2 +- .../pages/utils/popover/AnchorPlayground.js | 8 +-- .../pages/utils/popover/MouseOverPopover.js | 2 +- .../pages/utils/popover/PopoverPopupState.js | 2 +- .../pages/utils/popover/RenderPropsPopover.js | 2 +- docs/src/pages/utils/popover/SimplePopover.js | 2 +- .../utils/popper/FakedReferencePopper.js | 2 +- .../pages/utils/popper/NoTransitionPopper.js | 2 +- .../pages/utils/popper/PopperPopupState.js | 2 +- .../pages/utils/popper/PositionedPopper.js | 4 +- .../pages/utils/popper/RenderPropsPopper.js | 2 +- .../pages/utils/popper/ScrollPlayground.js | 6 +- docs/src/pages/utils/popper/SimplePopper.js | 2 +- docs/src/pages/utils/portal/SimplePortal.js | 4 +- .../pages/utils/transitions/SimpleCollapse.js | 2 +- .../src/pages/utils/transitions/SimpleFade.js | 2 +- .../src/pages/utils/transitions/SimpleGrow.js | 2 +- .../pages/utils/transitions/SimpleSlide.js | 4 +- .../src/pages/utils/transitions/SimpleZoom.js | 2 +- examples/cdn-next/index.html | 4 +- .../src/pages/index.js | 2 +- .../src/pages/index.js | 2 +- .../src/pages/index.tsx | 2 +- examples/create-react-app/src/pages/index.js | 2 +- examples/gatsby/src/pages/about.js | 2 +- examples/gatsby/src/pages/index.js | 2 +- .../pages/about.tsx | 2 +- .../pages/index.tsx | 2 +- examples/nextjs-hooks/pages/about.js | 2 +- examples/nextjs-hooks/pages/index.js | 2 +- examples/nextjs/pages/about.js | 2 +- examples/nextjs/pages/index.js | 2 +- examples/parcel/src/pages/index.js | 2 +- examples/ssr/App.js | 2 +- .../src/ToggleButton/ToggleButton.js | 2 +- .../material-ui-styles/test/styles.spec.tsx | 10 +-- packages/material-ui-system/src/spacing.js | 23 +++---- .../src/Breadcrumbs/BreadcrumbCollapsed.js | 4 +- packages/material-ui/src/Divider/Divider.js | 4 +- packages/material-ui/src/Grid/Grid.d.ts | 2 +- packages/material-ui/src/Grid/Grid.js | 17 ++--- packages/material-ui/src/Grid/Grid.test.js | 4 +- .../material-ui/src/styles/createMixins.d.ts | 2 +- .../material-ui/src/styles/createMixins.js | 8 +-- .../src/styles/createMuiTheme.d.ts | 2 +- .../material-ui/src/styles/createMuiTheme.js | 8 +-- .../src/styles/createMuiTheme.test.js | 8 +-- .../material-ui/src/styles/createSpacing.d.ts | 5 ++ .../material-ui/src/styles/createSpacing.js | 69 +++++++++++++++++++ .../src/styles/createSpacing.test.js | 60 ++++++++++++++++ .../src/styles/createStyles.test.js | 2 +- packages/material-ui/src/styles/spacing.d.ts | 9 --- packages/material-ui/src/styles/spacing.js | 7 -- .../material-ui/src/styles/withStyles.test.js | 2 +- .../test/typescript/components.spec.tsx | 4 +- .../test/typescript/styles.spec.tsx | 12 ++-- .../typescript/stylingComparison.spec.tsx | 2 +- pages/api/grid.md | 15 ++-- pages/index.js | 20 +++--- test/regressions/TestViewer.js | 2 +- test/regressions/tests/Grid/AutoGrid.js | 4 +- test/regressions/tests/Grid/SimpleGrid.js | 2 +- test/regressions/tests/Grid/StressGrid.js | 10 +-- test/regressions/tests/Table/PaddingTable.js | 2 +- .../tests/Tooltip/PositionedTooltips.js | 2 +- 331 files changed, 1020 insertions(+), 840 deletions(-) create mode 100644 packages/material-ui/src/styles/createSpacing.d.ts create mode 100644 packages/material-ui/src/styles/createSpacing.js create mode 100644 packages/material-ui/src/styles/createSpacing.test.js delete mode 100644 packages/material-ui/src/styles/spacing.d.ts delete mode 100644 packages/material-ui/src/styles/spacing.js diff --git a/.size-limit.js b/.size-limit.js index f37526ff32fe78..20995321102336 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -16,7 +16,7 @@ module.exports = [ name: 'The initial cost paid for using one component', webpack: true, path: 'packages/material-ui/build/Paper/index.js', - limit: '18.7 KB', + limit: '18.8 KB', }, { name: 'The initial cost paid for using one component with ES modules', @@ -28,7 +28,13 @@ module.exports = [ name: 'The size of the @material-ui/core modules', webpack: true, path: 'packages/material-ui/build/index.js', - limit: '92.3 KB', + limit: '92.4 KB', + }, + { + name: 'The theme object', + webpack: true, + path: 'packages/material-ui/build/styles/createMuiTheme.js', + limit: '7 KB', }, { name: 'The size of the @material-ui/styles modules', @@ -53,14 +59,14 @@ module.exports = [ name: 'The size of the @material-ui/core/Button component', webpack: true, path: 'packages/material-ui/build/esm/Button/index.js', - limit: '24.5 KB', + limit: '24.6 KB', }, { // vs https://bundlephobia.com/result?p=react-modal name: 'The size of the @material-ui/core/Modal component', webpack: true, path: 'packages/material-ui/build/esm/Modal/index.js', - limit: '24.0 KB', + limit: '24.1 KB', }, { // vs https://bundlephobia.com/result?p=react-popper diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index e173c4c0896ab8..f7461a05ff2fa4 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -15,19 +15,19 @@ const styles = theme => ({ minHeight: 116, maxWidth: 345, display: 'block', - marginTop: theme.spacing.unit * 4, - marginBottom: theme.spacing.unit * 3, + marginTop: theme.spacing(4), + marginBottom: theme.spacing(3), }, info: { ...theme.typography.caption, position: 'absolute', - padding: theme.spacing.unit, + padding: theme.spacing(1), cursor: 'default', bottom: 0, right: 0, }, paper: { - padding: theme.spacing.unit, + padding: theme.spacing(1), display: 'block', }, }); diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js index a736f0d64e0025..39d582638afc57 100644 --- a/docs/src/modules/components/AppContent.js +++ b/docs/src/modules/components/AppContent.js @@ -9,16 +9,16 @@ const styles = theme => ({ flex: '1 1 100%', maxWidth: '100%', margin: '0 auto', - paddingLeft: theme.spacing.unit * 2, - paddingRight: theme.spacing.unit * 2, + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), [theme.breakpoints.up('sm')]: { - paddingLeft: theme.spacing.unit * 4, - paddingRight: theme.spacing.unit * 4, + paddingLeft: theme.spacing(4), + paddingRight: theme.spacing(4), maxWidth: 'calc(100% - 167px)', }, [theme.breakpoints.up('lg')]: { - paddingLeft: theme.spacing.unit * 5, - paddingRight: theme.spacing.unit * 9, + paddingLeft: theme.spacing(5), + paddingRight: theme.spacing(9), maxWidth: 'calc(100% - 240px - 167px)', }, }, diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js index e2bca910e967d3..ee1ce997b52623 100644 --- a/docs/src/modules/components/AppDrawer.js +++ b/docs/src/modules/components/AppDrawer.js @@ -19,7 +19,7 @@ const styles = theme => ({ }, title: { color: theme.palette.text.secondary, - marginBottom: theme.spacing.unit / 2, + marginBottom: theme.spacing(0.5), '&:hover': { color: theme.palette.primary.main, }, @@ -30,7 +30,7 @@ const styles = theme => ({ }, toolbar: { ...theme.mixins.toolbar, - paddingLeft: theme.spacing.unit * 3, + paddingLeft: theme.spacing(3), display: 'flex', flexGrow: 1, flexDirection: 'column', diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js index 6607a058baff03..5eb01312b1e7f5 100644 --- a/docs/src/modules/components/AppSearch.js +++ b/docs/src/modules/components/AppSearch.js @@ -125,8 +125,8 @@ const styles = theme => ({ root: { fontFamily: theme.typography.fontFamily, position: 'relative', - marginRight: theme.spacing.unit * 2, - marginLeft: theme.spacing.unit, + marginRight: theme.spacing(2), + marginLeft: theme.spacing(1), borderRadius: theme.shape.borderRadius, backgroundColor: fade(theme.palette.common.white, 0.15), '&:hover': { @@ -141,7 +141,7 @@ const styles = theme => ({ }, }, search: { - width: theme.spacing.unit * 9, + width: theme.spacing(9), height: '100%', position: 'absolute', pointerEvents: 'none', @@ -153,8 +153,7 @@ const styles = theme => ({ color: 'inherit', }, inputInput: { - padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme - .spacing.unit * 9}px`, + padding: theme.spacing(1, 1, 1, 9), }, }); diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index a3dd8c74cc3a12..b58e78d82315e4 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/docs/src/modules/components/AppTableOfContents.js @@ -55,15 +55,14 @@ const styles = theme => ({ wordBreak: 'break-word', height: 'calc(100vh - 70px)', overflowY: 'auto', - padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px ${theme.spacing.unit * - 2}px 5px`, + padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(2)}px 5px`, display: 'none', [theme.breakpoints.up('sm')]: { display: 'block', }, }, contents: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), }, ul: { padding: 0, @@ -72,7 +71,7 @@ const styles = theme => ({ }, item: { fontSize: 13, - padding: `${theme.spacing.unit / 2}px 0`, + padding: theme.spacing(0.5, 0), }, }); diff --git a/docs/src/modules/components/AppTheme.js b/docs/src/modules/components/AppTheme.js index fdc118f048cc24..f6f8a3f2e8bba0 100644 --- a/docs/src/modules/components/AppTheme.js +++ b/docs/src/modules/components/AppTheme.js @@ -8,8 +8,8 @@ import Head from 'docs/src/modules/components/Head'; const styles = theme => ({ credit: { - marginTop: theme.spacing.unit * 6, - marginBottom: theme.spacing.unit * 4, + marginTop: theme.spacing(6), + marginBottom: theme.spacing(4), }, hideCredit: { position: 'absolute', diff --git a/docs/src/modules/components/Carbon.js b/docs/src/modules/components/Carbon.js index f6fb01670daadb..0c5e5de6844c60 100644 --- a/docs/src/modules/components/Carbon.js +++ b/docs/src/modules/components/Carbon.js @@ -7,13 +7,14 @@ const styles = theme => ({ '#carbonads': { overflow: 'hidden', backgroundColor: theme.palette.background.paper, - padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme - .spacing.unit + 130}px`, + padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing( + 1, + ) + 130}px`, borderRadius: theme.shape.borderRadius, '& .carbon-img': { float: 'left', marginLeft: -130, - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, '& img': { verticalAlign: 'middle', diff --git a/docs/src/modules/components/CodeFund.js b/docs/src/modules/components/CodeFund.js index c5e3b3be90d163..fd59688936e2da 100644 --- a/docs/src/modules/components/CodeFund.js +++ b/docs/src/modules/components/CodeFund.js @@ -7,13 +7,14 @@ const styles = theme => ({ '#cf': { overflow: 'hidden', backgroundColor: theme.palette.background.paper, - padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme - .spacing.unit + 130}px`, + padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing( + 1, + ) + 130}px`, borderRadius: theme.shape.borderRadius, '& .cf-img-wrapper.cf-img-wrapper': { float: 'left', marginLeft: -130, - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, '& img': { verticalAlign: 'middle', diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 013f512ca8be03..4ab316169a9662 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -40,10 +40,10 @@ const styles = theme => ({ root: { position: 'relative', marginBottom: 40, - marginLeft: -theme.spacing.unit * 2, - marginRight: -theme.spacing.unit * 2, + marginLeft: -theme.spacing(2), + marginRight: -theme.spacing(2), [theme.breakpoints.up('sm')]: { - padding: `0 ${theme.spacing.unit}px`, + padding: theme.spacing(0, 1), marginLeft: 0, marginRight: 0, }, @@ -56,13 +56,13 @@ const styles = theme => ({ justifyContent: 'center', padding: 20, [theme.breakpoints.up('sm')]: { - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, }, demoHiddenHeader: { - paddingTop: theme.spacing.unit * 2, + paddingTop: theme.spacing(2), [theme.breakpoints.up('sm')]: { - paddingTop: theme.spacing.unit * 3, + paddingTop: theme.spacing(3), }, }, header: { @@ -71,7 +71,7 @@ const styles = theme => ({ display: 'flex', flip: false, top: 0, - right: theme.spacing.unit, + right: theme.spacing(1), }, justifyContent: 'space-between', }, @@ -84,7 +84,7 @@ const styles = theme => ({ }, '& pre': { overflow: 'auto', - paddingTop: theme.spacing.unit * 5, + paddingTop: theme.spacing(5), margin: '0px !important', borderRadius: '0px !important', }, diff --git a/docs/src/modules/components/HomeBackers.js b/docs/src/modules/components/HomeBackers.js index 1792e93b5f2ed2..789feb81ca98c0 100644 --- a/docs/src/modules/components/HomeBackers.js +++ b/docs/src/modules/components/HomeBackers.js @@ -16,9 +16,9 @@ const styles = theme => ({ minHeight: 600, }, markdownElement: { - maxWidth: theme.spacing.unit * 110, + maxWidth: theme.spacing(110), margin: 'auto', - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), }, }); diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js index d2cdf5b009f313..cb4a1e90faf195 100644 --- a/docs/src/modules/components/HomeFooter.js +++ b/docs/src/modules/components/HomeFooter.js @@ -9,11 +9,11 @@ import Link from 'docs/src/modules/components/Link'; const styles = theme => ({ root: { - maxWidth: theme.spacing.unit * 110, + maxWidth: theme.spacing(110), margin: 'auto', - padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(3, 2), [theme.breakpoints.up('sm')]: { - padding: `${theme.spacing.unit * 6}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(6, 2), }, }, list: { @@ -22,11 +22,11 @@ const styles = theme => ({ listStyle: 'none', }, listItem: { - paddingTop: theme.spacing.unit / 2, - paddingBottom: theme.spacing.unit / 2, + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), }, version: { - marginTop: theme.spacing.unit, + marginTop: theme.spacing(1), }, }); diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js index 9ffcd42017a15f..a9945a229c97ee 100644 --- a/docs/src/modules/components/HomeSteps.js +++ b/docs/src/modules/components/HomeSteps.js @@ -18,11 +18,11 @@ import Link from 'docs/src/modules/components/Link'; const styles = theme => ({ step: { border: `12px solid ${theme.palette.background.paper}`, - padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(3, 2), borderRightWidth: 0, borderLeftWidth: 0, [theme.breakpoints.up('sm')]: { - padding: `${theme.spacing.unit * 5}px ${theme.spacing.unit * 4}px`, + padding: theme.spacing(5, 4), }, [theme.breakpoints.up('md')]: { borderRightWidth: 12, @@ -45,33 +45,33 @@ const styles = theme => ({ }, stepTitle: { display: 'flex', - marginBottom: theme.spacing.unit * 3, + marginBottom: theme.spacing(3), alignItems: 'center', }, stepIcon: { color: theme.palette.primary.dark, - marginRight: theme.spacing.unit * 2, + marginRight: theme.spacing(2), fontSize: 30, }, stepBody: { minHeight: 270, }, markdownElement: { - maxWidth: `calc(100vw - ${(theme.spacing.unit * 5 + 1) * 2}px)`, + maxWidth: `calc(100vw - ${(theme.spacing(5) + 1) * 2}px)`, '& pre, & pre[class*="language-"], & code': { backgroundColor: 'transparent', }, '& pre, & pre[class*="language-"]': { - padding: theme.spacing.unit, + padding: theme.spacing(1), margin: 0, }, }, divider: { - marginTop: theme.spacing.unit * 4, - marginBottom: theme.spacing.unit * 2, + marginTop: theme.spacing(4), + marginBottom: theme.spacing(2), }, link: { - marginTop: theme.spacing.unit, + marginTop: theme.spacing(1), display: 'block', }, img: { diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index de34848a5f7b9d..40e7452729bcd3 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -32,9 +32,9 @@ const styles = theme => ({ alignItems: 'flex-end', }, markdownElement: { - marginTop: theme.spacing.unit * 2, - marginBottom: theme.spacing.unit * 2, - padding: `0 ${theme.spacing.unit}px`, + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + padding: theme.spacing(0, 1), }, }); diff --git a/docs/src/modules/components/Tidelift.js b/docs/src/modules/components/Tidelift.js index fb148de49e06ea..aa616872c2d40a 100644 --- a/docs/src/modules/components/Tidelift.js +++ b/docs/src/modules/components/Tidelift.js @@ -9,8 +9,7 @@ import compose from 'recompose/compose'; const styles = theme => ({ root: { - padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme - .spacing.unit * 2}px`, + padding: theme.spacing(1, 1, 1, 2), right: 0, left: 0, display: 'flex', @@ -31,7 +30,7 @@ const styles = theme => ({ content: '""', width: 20, height: 20, - margin: `0 ${theme.spacing.unit}px 0 0`, + margin: theme.spacing(0, 1, 0, 0), }, }); diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 184ab5c84671a3..22572a3fa43a23 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -10,15 +10,15 @@ import Switch from '@material-ui/core/Switch'; const styles = theme => ({ root: { - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), paddingTop: 0, // Match default theme. backgroundColor: theme.palette.type === 'light' ? theme.palette.common.white : '#242424', - minHeight: theme.spacing.unit * 40, + minHeight: theme.spacing(40), width: '100%', }, switch: { - paddingBottom: theme.spacing.unit, + paddingBottom: theme.spacing(1), }, }); diff --git a/docs/src/pages/customization/themes/WithTheme.js b/docs/src/pages/customization/themes/WithTheme.js index 0fdf1159acca09..08bc8ab732df05 100644 --- a/docs/src/pages/customization/themes/WithTheme.js +++ b/docs/src/pages/customization/themes/WithTheme.js @@ -11,12 +11,12 @@ function WithTheme(props) { const styles = { primaryText: { backgroundColor: theme.palette.background.default, - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(1, 2), color: primaryText, }, primaryColor: { backgroundColor: primaryColor, - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(1, 2), color: theme.palette.common.white, }, }; diff --git a/docs/src/pages/customization/themes/themes.md b/docs/src/pages/customization/themes/themes.md index 7e6eb0834e92f5..cabfa43b63ce69 100644 --- a/docs/src/pages/customization/themes/themes.md +++ b/docs/src/pages/customization/themes/themes.md @@ -25,6 +25,7 @@ The following sections cover the most important theme variables: - [Palette](#palette) - [Type (light / dark theme)](#type-light-dark-theme) - [Typography](#typography) +- [Spacing](#spacing) - [Other variables](#other-variables) - [Custom variables](#custom-variables) @@ -215,7 +216,7 @@ If you want to learn more about typography, you can check out [the typography se {{"demo": "pages/customization/themes/TypographyTheme.js"}} -### Typography - Font family +#### Typography - Font family ```js const theme = createMuiTheme({ @@ -237,7 +238,7 @@ const theme = createMuiTheme({ }); ``` -### Typography - Font size +#### Typography - Font size Material-UI uses `rem` units for the font size. The browser `` element default font size is `16px`, but browsers have an option to change this value, @@ -262,7 +263,7 @@ The computed font size by the browser follows this mathematical equation: ![font-size](/static/images/font-size.gif) -### Typography - HTML font size +#### Typography - HTML font size You might want to change the `` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). We provide a `htmlFontSize` theme property for this use case. @@ -288,6 +289,51 @@ html { {{"demo": "pages/customization/themes/FontSizeTheme.js"}} +### Spacing + +We encourage you to use the `theme.spacing()` helper to create consistent spacing between the elements of your UI. +Material-UI uses [a recommended 8px scaling factor by default](https://material.io/design/layout/understanding-layout.html). + +```js +const styles = theme => ({ + root: { + // JSS uses px as the default units for this CSS property. + padding: theme.spacing(2), // Outputs 8 * 2 + }, +}); +``` + +You can change the spacing transformation by providing: + +- a number + +```js +const theme = createMuiTheme({ + spacing: 4, +}); + +theme.spacing(2) // = 4 * 2 +``` + +- or a function + +```js +const theme = createMuiTheme({ + spacing: factor => `${0.25 * factor}rem`, // (Bootstrap strategy) +}); + +theme.spacing(2) // = 0.5rem = 8px +``` + +#### Multiple arity + +The `theme.spacing()` helper accepts up to 4 arguments. +You can use the arguments to reduce the boilerplate: +```diff +- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, ++ padding: theme.spacing(1, 2), // '8px 16px' +``` + ### Other variables In addition to the palette, dark and light types, and typography, the theme normalizes implementation by providing many more default values, such as breakpoints, shadows, transitions, etc. diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.js b/docs/src/pages/demos/app-bar/BottomAppBar.js index b11be93f1ee669..6c739f97285a43 100644 --- a/docs/src/pages/demos/app-bar/BottomAppBar.js +++ b/docs/src/pages/demos/app-bar/BottomAppBar.js @@ -20,15 +20,15 @@ import MoreIcon from '@material-ui/icons/MoreVert'; const styles = theme => ({ text: { - paddingTop: theme.spacing.unit * 2, - paddingLeft: theme.spacing.unit * 2, - paddingRight: theme.spacing.unit * 2, + paddingTop: theme.spacing(2), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), }, paper: { paddingBottom: 50, }, list: { - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), }, subHeader: { backgroundColor: theme.palette.background.paper, diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.tsx b/docs/src/pages/demos/app-bar/BottomAppBar.tsx index f2b34cc86143ff..04bc848dd61508 100644 --- a/docs/src/pages/demos/app-bar/BottomAppBar.tsx +++ b/docs/src/pages/demos/app-bar/BottomAppBar.tsx @@ -21,15 +21,15 @@ import MoreIcon from '@material-ui/icons/MoreVert'; const styles = (theme: Theme) => createStyles({ text: { - paddingTop: theme.spacing.unit * 2, - paddingLeft: theme.spacing.unit * 2, - paddingRight: theme.spacing.unit * 2, + paddingTop: theme.spacing(2), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), }, paper: { paddingBottom: 50, }, list: { - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), }, subHeader: { backgroundColor: theme.palette.background.paper, diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js index 2a85217c5d466c..e063b6029d38c5 100644 --- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js +++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js @@ -40,16 +40,16 @@ const useStyles = makeStyles(theme => ({ '&:hover': { backgroundColor: fade(theme.palette.common.white, 0.25), }, - marginRight: theme.spacing.unit * 2, + marginRight: theme.spacing(2), marginLeft: 0, width: '100%', [theme.breakpoints.up('sm')]: { - marginLeft: theme.spacing.unit * 3, + marginLeft: theme.spacing(3), width: 'auto', }, }, searchIcon: { - width: theme.spacing.unit * 9, + width: theme.spacing(9), height: '100%', position: 'absolute', pointerEvents: 'none', @@ -62,10 +62,10 @@ const useStyles = makeStyles(theme => ({ width: '100%', }, inputInput: { - paddingTop: theme.spacing.unit, - paddingRight: theme.spacing.unit, - paddingBottom: theme.spacing.unit, - paddingLeft: theme.spacing.unit * 10, + paddingTop: theme.spacing(1), + paddingRight: theme.spacing(1), + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(10), transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('md')]: { diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.js b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.js index 936edacf13aba5..39ae75563ff4cd 100644 --- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.js +++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.js @@ -41,16 +41,16 @@ const styles = theme => ({ '&:hover': { backgroundColor: fade(theme.palette.common.white, 0.25), }, - marginRight: theme.spacing.unit * 2, + marginRight: theme.spacing(2), marginLeft: 0, width: '100%', [theme.breakpoints.up('sm')]: { - marginLeft: theme.spacing.unit * 3, + marginLeft: theme.spacing(3), width: 'auto', }, }, searchIcon: { - width: theme.spacing.unit * 9, + width: theme.spacing(9), height: '100%', position: 'absolute', pointerEvents: 'none', @@ -63,10 +63,10 @@ const styles = theme => ({ width: '100%', }, inputInput: { - paddingTop: theme.spacing.unit, - paddingRight: theme.spacing.unit, - paddingBottom: theme.spacing.unit, - paddingLeft: theme.spacing.unit * 10, + paddingTop: theme.spacing(1), + paddingRight: theme.spacing(1), + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(10), transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('md')]: { diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.tsx b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.tsx index 56ee618b011979..d847cd2a4febb5 100644 --- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.tsx +++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.tsx @@ -42,16 +42,16 @@ const styles = (theme: Theme) => '&:hover': { backgroundColor: fade(theme.palette.common.white, 0.25), }, - marginRight: theme.spacing.unit * 2, + marginRight: theme.spacing(2), marginLeft: 0, width: '100%', [theme.breakpoints.up('sm')]: { - marginLeft: theme.spacing.unit * 3, + marginLeft: theme.spacing(3), width: 'auto', }, }, searchIcon: { - width: theme.spacing.unit * 9, + width: theme.spacing(9), height: '100%', position: 'absolute', pointerEvents: 'none', @@ -64,10 +64,10 @@ const styles = (theme: Theme) => width: '100%', }, inputInput: { - paddingTop: theme.spacing.unit, - paddingRight: theme.spacing.unit, - paddingBottom: theme.spacing.unit, - paddingLeft: theme.spacing.unit * 10, + paddingTop: theme.spacing(1), + paddingRight: theme.spacing(1), + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(10), transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('md')]: { diff --git a/docs/src/pages/demos/app-bar/SearchAppBar.js b/docs/src/pages/demos/app-bar/SearchAppBar.js index 9d19f036b7acd7..7d9dd0071c1321 100644 --- a/docs/src/pages/demos/app-bar/SearchAppBar.js +++ b/docs/src/pages/demos/app-bar/SearchAppBar.js @@ -37,12 +37,12 @@ const styles = theme => ({ marginLeft: 0, width: '100%', [theme.breakpoints.up('sm')]: { - marginLeft: theme.spacing.unit, + marginLeft: theme.spacing(1), width: 'auto', }, }, searchIcon: { - width: theme.spacing.unit * 9, + width: theme.spacing(9), height: '100%', position: 'absolute', pointerEvents: 'none', @@ -55,10 +55,10 @@ const styles = theme => ({ width: '100%', }, inputInput: { - paddingTop: theme.spacing.unit, - paddingRight: theme.spacing.unit, - paddingBottom: theme.spacing.unit, - paddingLeft: theme.spacing.unit * 10, + paddingTop: theme.spacing(1), + paddingRight: theme.spacing(1), + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(10), transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('sm')]: { diff --git a/docs/src/pages/demos/app-bar/SearchAppBar.tsx b/docs/src/pages/demos/app-bar/SearchAppBar.tsx index 488d6d57c8c22a..fdd9bb71c58f3a 100644 --- a/docs/src/pages/demos/app-bar/SearchAppBar.tsx +++ b/docs/src/pages/demos/app-bar/SearchAppBar.tsx @@ -38,12 +38,12 @@ const styles = (theme: Theme) => marginLeft: 0, width: '100%', [theme.breakpoints.up('sm')]: { - marginLeft: theme.spacing.unit, + marginLeft: theme.spacing(1), width: 'auto', }, }, searchIcon: { - width: theme.spacing.unit * 9, + width: theme.spacing(9), height: '100%', position: 'absolute', pointerEvents: 'none', @@ -56,10 +56,10 @@ const styles = (theme: Theme) => width: '100%', }, inputInput: { - paddingTop: theme.spacing.unit, - paddingRight: theme.spacing.unit, - paddingBottom: theme.spacing.unit, - paddingLeft: theme.spacing.unit * 10, + paddingTop: theme.spacing(1), + paddingRight: theme.spacing(1), + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(10), transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('sm')]: { diff --git a/docs/src/pages/demos/autocomplete/IntegrationAutosuggest.js b/docs/src/pages/demos/autocomplete/IntegrationAutosuggest.js index 1c848d920cdc2c..4e6580730bfdef 100644 --- a/docs/src/pages/demos/autocomplete/IntegrationAutosuggest.js +++ b/docs/src/pages/demos/autocomplete/IntegrationAutosuggest.js @@ -124,7 +124,7 @@ const styles = theme => ({ suggestionsContainerOpen: { position: 'absolute', zIndex: 1, - marginTop: theme.spacing.unit, + marginTop: theme.spacing(1), left: 0, right: 0, }, @@ -137,7 +137,7 @@ const styles = theme => ({ listStyleType: 'none', }, divider: { - height: theme.spacing.unit * 2, + height: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js index 1b7829c8830901..66674f5469fbb0 100644 --- a/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js +++ b/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js @@ -209,12 +209,12 @@ const useStyles = makeStyles(theme => ({ paper: { position: 'absolute', zIndex: 1, - marginTop: theme.spacing.unit, + marginTop: theme.spacing(1), left: 0, right: 0, }, chip: { - margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`, + margin: theme.spacing(0.5, 2), }, inputRoot: { flexWrap: 'wrap', @@ -224,7 +224,7 @@ const useStyles = makeStyles(theme => ({ flexGrow: 1, }, divider: { - height: theme.spacing.unit * 2, + height: theme.spacing(2), }, })); diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js index 71cc1bbeb3b3eb..4eee6162b58696 100644 --- a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js +++ b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js @@ -224,12 +224,12 @@ const styles = theme => ({ paper: { position: 'absolute', zIndex: 1, - marginTop: theme.spacing.unit, + marginTop: theme.spacing(1), left: 0, right: 0, }, chip: { - margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`, + margin: theme.spacing(0.5, 2), }, inputRoot: { flexWrap: 'wrap', @@ -239,7 +239,7 @@ const styles = theme => ({ flexGrow: 1, }, divider: { - height: theme.spacing.unit * 2, + height: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js index 34a11af28b7d0b..c36feae0cb2151 100644 --- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js +++ b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js @@ -70,7 +70,7 @@ const useStyles = makeStyles(theme => ({ overflow: 'hidden', }, chip: { - margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`, + margin: theme.spacing(0.5, 2), }, chipFocused: { backgroundColor: emphasize( @@ -79,7 +79,7 @@ const useStyles = makeStyles(theme => ({ ), }, noOptionsMessage: { - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(1, 2), }, singleValue: { fontSize: 16, @@ -92,12 +92,12 @@ const useStyles = makeStyles(theme => ({ paper: { position: 'absolute', zIndex: 1, - marginTop: theme.spacing.unit, + marginTop: theme.spacing(1), left: 0, right: 0, }, divider: { - height: theme.spacing.unit * 2, + height: theme.spacing(2), }, })); diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js index 2865cffee904bf..5c63b70d7628ef 100644 --- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js +++ b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js @@ -71,7 +71,7 @@ const styles = theme => ({ overflow: 'hidden', }, chip: { - margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`, + margin: theme.spacing(0.5, 2), }, chipFocused: { backgroundColor: emphasize( @@ -80,7 +80,7 @@ const styles = theme => ({ ), }, noOptionsMessage: { - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(1, 2), }, singleValue: { fontSize: 16, @@ -93,12 +93,12 @@ const styles = theme => ({ paper: { position: 'absolute', zIndex: 1, - marginTop: theme.spacing.unit, + marginTop: theme.spacing(1), left: 0, right: 0, }, divider: { - height: theme.spacing.unit * 2, + height: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/badges/BadgeMax.js b/docs/src/pages/demos/badges/BadgeMax.js index a1b211d2312071..660d0801682069 100644 --- a/docs/src/pages/demos/badges/BadgeMax.js +++ b/docs/src/pages/demos/badges/BadgeMax.js @@ -6,8 +6,8 @@ import MailIcon from '@material-ui/icons/Mail'; const styles = theme => ({ margin: { - margin: theme.spacing.unit * 2, - marginRight: theme.spacing.unit * 3, + margin: theme.spacing(2), + marginRight: theme.spacing(3), }, }); diff --git a/docs/src/pages/demos/badges/BadgeVisibility.hooks.js b/docs/src/pages/demos/badges/BadgeVisibility.hooks.js index 35b8763035a952..baeb90e755e508 100644 --- a/docs/src/pages/demos/badges/BadgeVisibility.hooks.js +++ b/docs/src/pages/demos/badges/BadgeVisibility.hooks.js @@ -15,13 +15,13 @@ const useStyles = makeStyles(theme => ({ width: '100%', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, divider: { width: '100%', }, row: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), }, })); diff --git a/docs/src/pages/demos/badges/BadgeVisibility.js b/docs/src/pages/demos/badges/BadgeVisibility.js index 2683a9b7451c30..2a341d86f8f4be 100644 --- a/docs/src/pages/demos/badges/BadgeVisibility.js +++ b/docs/src/pages/demos/badges/BadgeVisibility.js @@ -16,13 +16,13 @@ const styles = theme => ({ width: '100%', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, divider: { width: '100%', }, row: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/badges/DotBadge.js b/docs/src/pages/demos/badges/DotBadge.js index e8dc33fcd3929e..8ce25bb24ab5e7 100644 --- a/docs/src/pages/demos/badges/DotBadge.js +++ b/docs/src/pages/demos/badges/DotBadge.js @@ -7,7 +7,7 @@ import Typography from '@material-ui/core/Typography'; const styles = theme => ({ margin: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/badges/SimpleBadge.js b/docs/src/pages/demos/badges/SimpleBadge.js index 99f73f0f6634b2..d63d723fce04af 100644 --- a/docs/src/pages/demos/badges/SimpleBadge.js +++ b/docs/src/pages/demos/badges/SimpleBadge.js @@ -12,10 +12,10 @@ import Button from '@material-ui/core/Button'; const styles = theme => ({ margin: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), }, padding: { - padding: `0 ${theme.spacing.unit * 2}px`, + padding: theme.spacing(0, 2), }, }); diff --git a/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js index b61036208eb64c..a512022ef4f1a3 100644 --- a/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js +++ b/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js @@ -14,7 +14,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, paper: { - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(1, 2), }, }); diff --git a/docs/src/pages/demos/breadcrumbs/CustomSeparator.js b/docs/src/pages/demos/breadcrumbs/CustomSeparator.js index b94e1b3292f4cc..9c55ca7e89e4c5 100644 --- a/docs/src/pages/demos/breadcrumbs/CustomSeparator.js +++ b/docs/src/pages/demos/breadcrumbs/CustomSeparator.js @@ -13,7 +13,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, paper: { - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(1, 2), }, }); diff --git a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js index 72be28313bb359..7b59f3dcb7c015 100644 --- a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js +++ b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js @@ -11,7 +11,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; const styles = theme => ({ root: { - padding: theme.spacing.unit, + padding: theme.spacing(1), }, chip: { backgroundColor: theme.palette.grey[100], @@ -28,7 +28,7 @@ const styles = theme => ({ }, avatar: { background: 'none', - marginRight: -theme.spacing.unit * 1.5, + marginRight: -theme.spacing(1.5), }, }); diff --git a/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js index e07c31b9dbd750..acff747b19c5c0 100644 --- a/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js +++ b/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js @@ -11,13 +11,13 @@ import GrainIcon from '@material-ui/icons/Grain'; const styles = theme => ({ root: { - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(1, 2), }, link: { display: 'flex', }, icon: { - marginRight: theme.spacing.unit / 2, + marginRight: theme.spacing(0.5), width: 20, height: 20, }, diff --git a/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js index ff76baab50bd7a..93095758243707 100644 --- a/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js +++ b/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js @@ -52,10 +52,10 @@ const styles = theme => ({ }, lists: { backgroundColor: theme.palette.background.paper, - marginTop: theme.spacing.unit, + marginTop: theme.spacing(1), }, nested: { - paddingLeft: theme.spacing.unit * 4, + paddingLeft: theme.spacing(4), }, }); diff --git a/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js index 669028fc8e751d..814809ef954540 100644 --- a/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js +++ b/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js @@ -12,7 +12,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, paper: { - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(1, 2), }, }); diff --git a/docs/src/pages/demos/buttons/ButtonBases.js b/docs/src/pages/demos/buttons/ButtonBases.js index 0093246770f4b5..e832dd6f46c75f 100644 --- a/docs/src/pages/demos/buttons/ButtonBases.js +++ b/docs/src/pages/demos/buttons/ButtonBases.js @@ -64,7 +64,7 @@ const styles = theme => ({ }, imageTitle: { position: 'relative', - padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 4}px ${theme.spacing.unit + 6}px`, + padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`, }, imageMarked: { height: 3, diff --git a/docs/src/pages/demos/buttons/ButtonSizes.js b/docs/src/pages/demos/buttons/ButtonSizes.js index 912c059da3145d..ac9047920f8fb9 100644 --- a/docs/src/pages/demos/buttons/ButtonSizes.js +++ b/docs/src/pages/demos/buttons/ButtonSizes.js @@ -10,10 +10,10 @@ import NavigationIcon from '@material-ui/icons/Navigation'; const styles = theme => ({ margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, extendedIcon: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/buttons/ContainedButtons.js b/docs/src/pages/demos/buttons/ContainedButtons.js index 2dfc20ffdb5d7e..7f659c026ec4bf 100644 --- a/docs/src/pages/demos/buttons/ContainedButtons.js +++ b/docs/src/pages/demos/buttons/ContainedButtons.js @@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button'; const styles = theme => ({ button: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, input: { display: 'none', diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js index 92b9e9e54d4c17..058b4b1feece30 100644 --- a/docs/src/pages/demos/buttons/CustomizedButtons.js +++ b/docs/src/pages/demos/buttons/CustomizedButtons.js @@ -8,7 +8,7 @@ import green from '@material-ui/core/colors/green'; const styles = theme => ({ margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, cssRoot: { color: theme.palette.getContrastText(purple[500]), diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js index aff0946fb0c448..31c786c17eec2c 100644 --- a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js +++ b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js @@ -38,8 +38,8 @@ const useStyles = makeStyles(theme => ({ }, fab: { position: 'absolute', - bottom: theme.spacing.unit * 2, - right: theme.spacing.unit * 2, + bottom: theme.spacing(2), + right: theme.spacing(2), }, fabGreen: { color: theme.palette.common.white, diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js index 68306ac3bf83d7..a9be95c06e1323 100644 --- a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js +++ b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js @@ -38,8 +38,8 @@ const styles = theme => ({ }, fab: { position: 'absolute', - bottom: theme.spacing.unit * 2, - right: theme.spacing.unit * 2, + bottom: theme.spacing(2), + right: theme.spacing(2), }, fabGreen: { color: theme.palette.common.white, diff --git a/docs/src/pages/demos/buttons/FloatingActionButtons.js b/docs/src/pages/demos/buttons/FloatingActionButtons.js index ef5e639f3ccae1..72a29573f4765f 100644 --- a/docs/src/pages/demos/buttons/FloatingActionButtons.js +++ b/docs/src/pages/demos/buttons/FloatingActionButtons.js @@ -9,10 +9,10 @@ import NavigationIcon from '@material-ui/icons/Navigation'; const styles = theme => ({ fab: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, extendedIcon: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/buttons/IconButtons.js b/docs/src/pages/demos/buttons/IconButtons.js index 4b37568911024d..9f5c35b973a896 100644 --- a/docs/src/pages/demos/buttons/IconButtons.js +++ b/docs/src/pages/demos/buttons/IconButtons.js @@ -9,7 +9,7 @@ import PhotoCamera from '@material-ui/icons/PhotoCamera'; const styles = theme => ({ button: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, input: { display: 'none', diff --git a/docs/src/pages/demos/buttons/IconLabelButtons.js b/docs/src/pages/demos/buttons/IconLabelButtons.js index b41cbff02b7a51..0d1c8a3b7da095 100644 --- a/docs/src/pages/demos/buttons/IconLabelButtons.js +++ b/docs/src/pages/demos/buttons/IconLabelButtons.js @@ -11,13 +11,13 @@ import SaveIcon from '@material-ui/icons/Save'; const styles = theme => ({ button: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, leftIcon: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, rightIcon: { - marginLeft: theme.spacing.unit, + marginLeft: theme.spacing(1), }, iconSmall: { fontSize: 20, diff --git a/docs/src/pages/demos/buttons/OutlinedButtons.js b/docs/src/pages/demos/buttons/OutlinedButtons.js index c3120b6c661f1c..76507b59380468 100644 --- a/docs/src/pages/demos/buttons/OutlinedButtons.js +++ b/docs/src/pages/demos/buttons/OutlinedButtons.js @@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button'; const styles = theme => ({ button: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, input: { display: 'none', diff --git a/docs/src/pages/demos/buttons/TextButtons.js b/docs/src/pages/demos/buttons/TextButtons.js index e8d40843bf5ce3..e946bd06165d27 100644 --- a/docs/src/pages/demos/buttons/TextButtons.js +++ b/docs/src/pages/demos/buttons/TextButtons.js @@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button'; const styles = theme => ({ button: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, input: { display: 'none', diff --git a/docs/src/pages/demos/cards/MediaControlCard.js b/docs/src/pages/demos/cards/MediaControlCard.js index 6316dab05160cd..9e31d31683fb3b 100644 --- a/docs/src/pages/demos/cards/MediaControlCard.js +++ b/docs/src/pages/demos/cards/MediaControlCard.js @@ -27,8 +27,8 @@ const styles = theme => ({ controls: { display: 'flex', alignItems: 'center', - paddingLeft: theme.spacing.unit, - paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing(1), + paddingBottom: theme.spacing(1), }, playIcon: { height: 38, diff --git a/docs/src/pages/demos/chips/Chips.js b/docs/src/pages/demos/chips/Chips.js index 1cc3db60c95f6a..442631d2bdb795 100644 --- a/docs/src/pages/demos/chips/Chips.js +++ b/docs/src/pages/demos/chips/Chips.js @@ -13,7 +13,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, chip: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/chips/ChipsArray.hooks.js b/docs/src/pages/demos/chips/ChipsArray.hooks.js index 38d58c1fc4a856..55a81770cb3328 100644 --- a/docs/src/pages/demos/chips/ChipsArray.hooks.js +++ b/docs/src/pages/demos/chips/ChipsArray.hooks.js @@ -9,10 +9,10 @@ const useStyles = makeStyles(theme => ({ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', - padding: theme.spacing.unit / 2, + padding: theme.spacing(0.5), }, chip: { - margin: theme.spacing.unit / 2, + margin: theme.spacing(0.5), }, })); diff --git a/docs/src/pages/demos/chips/ChipsArray.js b/docs/src/pages/demos/chips/ChipsArray.js index 4a7f8f0f288a2b..81621449ed4dfc 100644 --- a/docs/src/pages/demos/chips/ChipsArray.js +++ b/docs/src/pages/demos/chips/ChipsArray.js @@ -10,10 +10,10 @@ const styles = theme => ({ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', - padding: theme.spacing.unit / 2, + padding: theme.spacing(0.5), }, chip: { - margin: theme.spacing.unit / 2, + margin: theme.spacing(0.5), }, }); diff --git a/docs/src/pages/demos/chips/ChipsPlayground.js b/docs/src/pages/demos/chips/ChipsPlayground.js index 5dc631bb6b222e..3d0b92ac01e03c 100644 --- a/docs/src/pages/demos/chips/ChipsPlayground.js +++ b/docs/src/pages/demos/chips/ChipsPlayground.js @@ -19,10 +19,10 @@ const styles = theme => ({ flexGrow: 1, }, control: { - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), }, chipWrapper: { - marginBottom: theme.spacing.unit * 5, + marginBottom: theme.spacing(5), }, }); @@ -115,7 +115,7 @@ class ChipsPlayground extends React.Component { return ( - + - + color diff --git a/docs/src/pages/demos/chips/OutlinedChips.js b/docs/src/pages/demos/chips/OutlinedChips.js index 8217dd21831836..fac907b66495d6 100644 --- a/docs/src/pages/demos/chips/OutlinedChips.js +++ b/docs/src/pages/demos/chips/OutlinedChips.js @@ -13,7 +13,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, chip: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/dialogs/CustomizedDialog.js b/docs/src/pages/demos/dialogs/CustomizedDialog.js index 0f6f83d37d3e51..11d6476d853cd6 100644 --- a/docs/src/pages/demos/dialogs/CustomizedDialog.js +++ b/docs/src/pages/demos/dialogs/CustomizedDialog.js @@ -13,12 +13,12 @@ const DialogTitle = withStyles(theme => ({ root: { borderBottom: `1px solid ${theme.palette.divider}`, margin: 0, - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), }, closeButton: { position: 'absolute', - right: theme.spacing.unit, - top: theme.spacing.unit, + right: theme.spacing(1), + top: theme.spacing(1), color: theme.palette.grey[500], }, }))(props => { @@ -38,7 +38,7 @@ const DialogTitle = withStyles(theme => ({ const DialogContent = withStyles(theme => ({ root: { margin: 0, - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), }, }))(MuiDialogContent); @@ -46,7 +46,7 @@ const DialogActions = withStyles(theme => ({ root: { borderTop: `1px solid ${theme.palette.divider}`, margin: 0, - padding: theme.spacing.unit, + padding: theme.spacing(1), }, }))(MuiDialogActions); diff --git a/docs/src/pages/demos/dialogs/MaxWidthDialog.js b/docs/src/pages/demos/dialogs/MaxWidthDialog.js index ca248693e2e79b..7577bc11dd1f80 100644 --- a/docs/src/pages/demos/dialogs/MaxWidthDialog.js +++ b/docs/src/pages/demos/dialogs/MaxWidthDialog.js @@ -22,11 +22,11 @@ const styles = theme => ({ width: 'fit-content', }, formControl: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), minWidth: 120, }, formControlLabel: { - marginTop: theme.spacing.unit, + marginTop: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/dividers/MiddleDividers.js b/docs/src/pages/demos/dividers/MiddleDividers.js index 2d7faf71fb5bfb..e40d847c232dd4 100644 --- a/docs/src/pages/demos/dividers/MiddleDividers.js +++ b/docs/src/pages/demos/dividers/MiddleDividers.js @@ -14,16 +14,16 @@ const styles = theme => ({ backgroundColor: theme.palette.background.paper, }, chip: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, section1: { - margin: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`, + margin: theme.spacing(3, 2), }, section2: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), }, section3: { - margin: `${theme.spacing.unit * 6}px ${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px`, + margin: theme.spacing(6, 2, 2), }, }); diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.js b/docs/src/pages/demos/dividers/SubheaderDividers.js index 1b9ed4470bbf25..5bb4ac40c2d0f4 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.js +++ b/docs/src/pages/demos/dividers/SubheaderDividers.js @@ -16,10 +16,10 @@ const styles = theme => ({ backgroundColor: theme.palette.background.paper, }, dividerFullWidth: { - margin: `5px 0 0 ${theme.spacing.unit * 2}px`, + margin: `5px 0 0 ${theme.spacing(2)}px`, }, dividerInset: { - margin: `5px 0 0 ${theme.spacing.unit * 9}px`, + margin: `5px 0 0 ${theme.spacing(9)}px`, }, }); diff --git a/docs/src/pages/demos/drawers/ClippedDrawer.js b/docs/src/pages/demos/drawers/ClippedDrawer.js index 5c183d85f92e47..633e5e3056684a 100644 --- a/docs/src/pages/demos/drawers/ClippedDrawer.js +++ b/docs/src/pages/demos/drawers/ClippedDrawer.js @@ -32,7 +32,7 @@ const styles = theme => ({ }, content: { flexGrow: 1, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, toolbar: theme.mixins.toolbar, }); diff --git a/docs/src/pages/demos/drawers/MiniDrawer.hooks.js b/docs/src/pages/demos/drawers/MiniDrawer.hooks.js index 037e9f83b7d6a3..34ebb45d7dbe3f 100644 --- a/docs/src/pages/demos/drawers/MiniDrawer.hooks.js +++ b/docs/src/pages/demos/drawers/MiniDrawer.hooks.js @@ -64,9 +64,9 @@ const useStyles = makeStyles(theme => ({ duration: theme.transitions.duration.leavingScreen, }), overflowX: 'hidden', - width: theme.spacing.unit * 7 + 1, + width: theme.spacing(7) + 1, [theme.breakpoints.up('sm')]: { - width: theme.spacing.unit * 9 + 1, + width: theme.spacing(9) + 1, }, }, toolbar: { @@ -78,7 +78,7 @@ const useStyles = makeStyles(theme => ({ }, content: { flexGrow: 1, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, })); diff --git a/docs/src/pages/demos/drawers/MiniDrawer.js b/docs/src/pages/demos/drawers/MiniDrawer.js index cdf200f61b64b7..8a63135664161d 100644 --- a/docs/src/pages/demos/drawers/MiniDrawer.js +++ b/docs/src/pages/demos/drawers/MiniDrawer.js @@ -65,9 +65,9 @@ const styles = theme => ({ duration: theme.transitions.duration.leavingScreen, }), overflowX: 'hidden', - width: theme.spacing.unit * 7 + 1, + width: theme.spacing(7) + 1, [theme.breakpoints.up('sm')]: { - width: theme.spacing.unit * 9 + 1, + width: theme.spacing(9) + 1, }, }, toolbar: { @@ -79,7 +79,7 @@ const styles = theme => ({ }, content: { flexGrow: 1, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, }); diff --git a/docs/src/pages/demos/drawers/PermanentDrawerLeft.js b/docs/src/pages/demos/drawers/PermanentDrawerLeft.js index d549c36c38a129..6928c154484938 100644 --- a/docs/src/pages/demos/drawers/PermanentDrawerLeft.js +++ b/docs/src/pages/demos/drawers/PermanentDrawerLeft.js @@ -35,7 +35,7 @@ const styles = theme => ({ content: { flexGrow: 1, backgroundColor: theme.palette.background.default, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, }); diff --git a/docs/src/pages/demos/drawers/PermanentDrawerRight.js b/docs/src/pages/demos/drawers/PermanentDrawerRight.js index 7a8d66de92153f..d26385fd6091db 100644 --- a/docs/src/pages/demos/drawers/PermanentDrawerRight.js +++ b/docs/src/pages/demos/drawers/PermanentDrawerRight.js @@ -35,7 +35,7 @@ const styles = theme => ({ content: { flexGrow: 1, backgroundColor: theme.palette.background.default, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, }); diff --git a/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js b/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js index 24e52a3f529f4c..6f957572374e39 100644 --- a/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js +++ b/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js @@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({ }, content: { flexGrow: 1, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), transition: theme.transitions.create('margin', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, diff --git a/docs/src/pages/demos/drawers/PersistentDrawerLeft.js b/docs/src/pages/demos/drawers/PersistentDrawerLeft.js index 8322854c6db56c..44eb6d9d570cfc 100644 --- a/docs/src/pages/demos/drawers/PersistentDrawerLeft.js +++ b/docs/src/pages/demos/drawers/PersistentDrawerLeft.js @@ -62,7 +62,7 @@ const styles = theme => ({ }, content: { flexGrow: 1, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), transition: theme.transitions.create('margin', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, diff --git a/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js b/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js index 8c8af5448382fa..902bc66f9b0452 100644 --- a/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js +++ b/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js @@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({ }, content: { flexGrow: 1, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), transition: theme.transitions.create('margin', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, diff --git a/docs/src/pages/demos/drawers/PersistentDrawerRight.js b/docs/src/pages/demos/drawers/PersistentDrawerRight.js index b80ffd265d4937..92a563aee1c593 100644 --- a/docs/src/pages/demos/drawers/PersistentDrawerRight.js +++ b/docs/src/pages/demos/drawers/PersistentDrawerRight.js @@ -62,7 +62,7 @@ const styles = theme => ({ }, content: { flexGrow: 1, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), transition: theme.transitions.create('margin', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, diff --git a/docs/src/pages/demos/drawers/ResponsiveDrawer.hooks.js b/docs/src/pages/demos/drawers/ResponsiveDrawer.hooks.js index 8018d8176ebae3..96a980c3aafc3a 100644 --- a/docs/src/pages/demos/drawers/ResponsiveDrawer.hooks.js +++ b/docs/src/pages/demos/drawers/ResponsiveDrawer.hooks.js @@ -47,7 +47,7 @@ const useStyles = makeStyles(theme => ({ }, content: { flexGrow: 1, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, })); diff --git a/docs/src/pages/demos/drawers/ResponsiveDrawer.js b/docs/src/pages/demos/drawers/ResponsiveDrawer.js index 79311cb8c221bb..147f23d5860dfe 100644 --- a/docs/src/pages/demos/drawers/ResponsiveDrawer.js +++ b/docs/src/pages/demos/drawers/ResponsiveDrawer.js @@ -47,7 +47,7 @@ const styles = theme => ({ }, content: { flexGrow: 1, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, }); diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js index 6b7576b9acc857..aac87619ca065c 100644 --- a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js +++ b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js @@ -43,7 +43,7 @@ ExpansionPanelSummary.muiName = 'ExpansionPanelSummary'; const ExpansionPanelDetails = withStyles(theme => ({ root: { - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), }, }))(MuiExpansionPanelDetails); diff --git a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js index b1965fdc9438d3..bee7727a335d8a 100644 --- a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js +++ b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js @@ -36,7 +36,7 @@ const styles = theme => ({ }, helper: { borderLeft: `2px solid ${theme.palette.divider}`, - padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + padding: theme.spacing(1, 2), }, link: { color: theme.palette.primary.main, diff --git a/docs/src/pages/demos/lists/InteractiveList.hooks.js b/docs/src/pages/demos/lists/InteractiveList.hooks.js index 47045cf88a31b2..8b618f53ad0f92 100644 --- a/docs/src/pages/demos/lists/InteractiveList.hooks.js +++ b/docs/src/pages/demos/lists/InteractiveList.hooks.js @@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({ backgroundColor: theme.palette.background.paper, }, title: { - margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`, + margin: theme.spacing(4, 0, 2), }, })); @@ -66,7 +66,7 @@ function InteractiveList() { label="Enable secondary text" /> - + Text only @@ -105,7 +105,7 @@ function InteractiveList() { - + Avatar with text diff --git a/docs/src/pages/demos/lists/InteractiveList.js b/docs/src/pages/demos/lists/InteractiveList.js index 31189ea4a053a1..ce564212bc53a3 100644 --- a/docs/src/pages/demos/lists/InteractiveList.js +++ b/docs/src/pages/demos/lists/InteractiveList.js @@ -26,7 +26,7 @@ const styles = theme => ({ backgroundColor: theme.palette.background.paper, }, title: { - margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`, + margin: theme.spacing(4, 0, 2), }, }); @@ -72,7 +72,7 @@ class InteractiveList extends React.Component { label="Enable secondary text" /> - + Text only @@ -111,7 +111,7 @@ class InteractiveList extends React.Component { - + Avatar with text diff --git a/docs/src/pages/demos/lists/NestedList.hooks.js b/docs/src/pages/demos/lists/NestedList.hooks.js index cb7669472c30c1..67a7c38a240a6f 100644 --- a/docs/src/pages/demos/lists/NestedList.hooks.js +++ b/docs/src/pages/demos/lists/NestedList.hooks.js @@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({ backgroundColor: theme.palette.background.paper, }, nested: { - paddingLeft: theme.spacing.unit * 4, + paddingLeft: theme.spacing(4), }, })); diff --git a/docs/src/pages/demos/lists/NestedList.js b/docs/src/pages/demos/lists/NestedList.js index 904a508dc7a5be..7b1a077ff468c7 100644 --- a/docs/src/pages/demos/lists/NestedList.js +++ b/docs/src/pages/demos/lists/NestedList.js @@ -21,7 +21,7 @@ const styles = theme => ({ backgroundColor: theme.palette.background.paper, }, nested: { - paddingLeft: theme.spacing.unit * 4, + paddingLeft: theme.spacing(4), }, }); diff --git a/docs/src/pages/demos/menus/MenuListComposition.hooks.js b/docs/src/pages/demos/menus/MenuListComposition.hooks.js index 7560e4b10685e8..69396200347491 100644 --- a/docs/src/pages/demos/menus/MenuListComposition.hooks.js +++ b/docs/src/pages/demos/menus/MenuListComposition.hooks.js @@ -13,7 +13,7 @@ const useStyles = makeStyles(theme => ({ display: 'flex', }, paper: { - marginRight: theme.spacing.unit * 2, + marginRight: theme.spacing(2), }, })); diff --git a/docs/src/pages/demos/menus/MenuListComposition.js b/docs/src/pages/demos/menus/MenuListComposition.js index b80114ac7124c5..eeb2b5c2de9e51 100644 --- a/docs/src/pages/demos/menus/MenuListComposition.js +++ b/docs/src/pages/demos/menus/MenuListComposition.js @@ -14,7 +14,7 @@ const styles = theme => ({ display: 'flex', }, paper: { - marginRight: theme.spacing.unit * 2, + marginRight: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/paper/PaperSheet.js b/docs/src/pages/demos/paper/PaperSheet.js index 48f74e344d4dd0..d398d6eb5e7bd4 100644 --- a/docs/src/pages/demos/paper/PaperSheet.js +++ b/docs/src/pages/demos/paper/PaperSheet.js @@ -7,8 +7,8 @@ import Typography from '@material-ui/core/Typography'; const styles = theme => ({ root: { ...theme.mixins.gutters(), - paddingTop: theme.spacing.unit * 2, - paddingBottom: theme.spacing.unit * 2, + paddingTop: theme.spacing(2), + paddingBottom: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/pickers/DateAndTimePickers.js b/docs/src/pages/demos/pickers/DateAndTimePickers.js index 2746043ca451e9..0d5430666e8728 100644 --- a/docs/src/pages/demos/pickers/DateAndTimePickers.js +++ b/docs/src/pages/demos/pickers/DateAndTimePickers.js @@ -9,8 +9,8 @@ const styles = theme => ({ flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), width: 200, }, }); diff --git a/docs/src/pages/demos/pickers/DatePickers.js b/docs/src/pages/demos/pickers/DatePickers.js index 2c1503dddc09d5..104bdfd369934e 100644 --- a/docs/src/pages/demos/pickers/DatePickers.js +++ b/docs/src/pages/demos/pickers/DatePickers.js @@ -9,8 +9,8 @@ const styles = theme => ({ flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), width: 200, }, }); diff --git a/docs/src/pages/demos/pickers/TimePickers.js b/docs/src/pages/demos/pickers/TimePickers.js index 388f04bfba7718..0ba9e697165fb1 100644 --- a/docs/src/pages/demos/pickers/TimePickers.js +++ b/docs/src/pages/demos/pickers/TimePickers.js @@ -9,8 +9,8 @@ const styles = theme => ({ flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), width: 200, }, }); diff --git a/docs/src/pages/demos/progress/CircularDeterminate.hooks.js b/docs/src/pages/demos/progress/CircularDeterminate.hooks.js index af08add9352b5f..aaee46ad49d5d0 100644 --- a/docs/src/pages/demos/progress/CircularDeterminate.hooks.js +++ b/docs/src/pages/demos/progress/CircularDeterminate.hooks.js @@ -4,7 +4,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'; const useStyles = makeStyles(theme => ({ progress: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), }, })); diff --git a/docs/src/pages/demos/progress/CircularDeterminate.js b/docs/src/pages/demos/progress/CircularDeterminate.js index 3366ba6442bdad..70cd8486563192 100644 --- a/docs/src/pages/demos/progress/CircularDeterminate.js +++ b/docs/src/pages/demos/progress/CircularDeterminate.js @@ -5,7 +5,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'; const styles = theme => ({ progress: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/progress/CircularIndeterminate.js b/docs/src/pages/demos/progress/CircularIndeterminate.js index 63b8017b7f4cd9..a2726e34c0621d 100644 --- a/docs/src/pages/demos/progress/CircularIndeterminate.js +++ b/docs/src/pages/demos/progress/CircularIndeterminate.js @@ -5,7 +5,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'; const styles = theme => ({ progress: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/progress/CircularIntegration.hooks.js b/docs/src/pages/demos/progress/CircularIntegration.hooks.js index 8caa33d182f894..061245a74e9e86 100644 --- a/docs/src/pages/demos/progress/CircularIntegration.hooks.js +++ b/docs/src/pages/demos/progress/CircularIntegration.hooks.js @@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({ alignItems: 'center', }, wrapper: { - margin: theme.spacing.unit, + margin: theme.spacing(1), position: 'relative', }, buttonSuccess: { diff --git a/docs/src/pages/demos/progress/CircularIntegration.js b/docs/src/pages/demos/progress/CircularIntegration.js index 4db9e652d3b596..97d7ed2dcfb731 100644 --- a/docs/src/pages/demos/progress/CircularIntegration.js +++ b/docs/src/pages/demos/progress/CircularIntegration.js @@ -15,7 +15,7 @@ const styles = theme => ({ alignItems: 'center', }, wrapper: { - margin: theme.spacing.unit, + margin: theme.spacing(1), position: 'relative', }, buttonSuccess: { diff --git a/docs/src/pages/demos/progress/CircularStatic.hooks.js b/docs/src/pages/demos/progress/CircularStatic.hooks.js index a2ce0c742c6ba6..8586547bbe912a 100644 --- a/docs/src/pages/demos/progress/CircularStatic.hooks.js +++ b/docs/src/pages/demos/progress/CircularStatic.hooks.js @@ -4,7 +4,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'; const useStyles = makeStyles(theme => ({ progress: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), }, })); diff --git a/docs/src/pages/demos/progress/CircularStatic.js b/docs/src/pages/demos/progress/CircularStatic.js index 66c256c73ad92e..92af6894e82d21 100644 --- a/docs/src/pages/demos/progress/CircularStatic.js +++ b/docs/src/pages/demos/progress/CircularStatic.js @@ -5,7 +5,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'; const styles = theme => ({ progress: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/progress/CustomizedProgress.js b/docs/src/pages/demos/progress/CustomizedProgress.js index 902ee6d7afcd6a..02a4a40468e797 100644 --- a/docs/src/pages/demos/progress/CustomizedProgress.js +++ b/docs/src/pages/demos/progress/CustomizedProgress.js @@ -10,7 +10,7 @@ const styles = theme => ({ flexGrow: 1, }, progress: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), color: '#00695c', }, linearColorPrimary: { @@ -21,7 +21,7 @@ const styles = theme => ({ }, // Reproduce the Facebook spinners. facebook: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), position: 'relative', }, facebook1: { diff --git a/docs/src/pages/demos/progress/DelayingAppearance.hooks.js b/docs/src/pages/demos/progress/DelayingAppearance.hooks.js index e4cf9b116105bd..673c6a4d05575c 100644 --- a/docs/src/pages/demos/progress/DelayingAppearance.hooks.js +++ b/docs/src/pages/demos/progress/DelayingAppearance.hooks.js @@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({ alignItems: 'center', }, button: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), }, placeholder: { height: 40, diff --git a/docs/src/pages/demos/progress/DelayingAppearance.js b/docs/src/pages/demos/progress/DelayingAppearance.js index 0f8a0440a70f7e..8cf5efd3327935 100644 --- a/docs/src/pages/demos/progress/DelayingAppearance.js +++ b/docs/src/pages/demos/progress/DelayingAppearance.js @@ -13,7 +13,7 @@ const styles = theme => ({ alignItems: 'center', }, button: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), }, placeholder: { height: 40, diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js b/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js index 3706b777c2f2fd..fe573bc89588bd 100644 --- a/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js +++ b/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js @@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({ display: 'flex', }, formControl: { - margin: theme.spacing.unit * 3, + margin: theme.spacing(3), }, })); diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.js b/docs/src/pages/demos/selection-controls/CheckboxesGroup.js index 39f7cad5379cfb..1bdb5a12a508be 100644 --- a/docs/src/pages/demos/selection-controls/CheckboxesGroup.js +++ b/docs/src/pages/demos/selection-controls/CheckboxesGroup.js @@ -13,7 +13,7 @@ const styles = theme => ({ display: 'flex', }, formControl: { - margin: theme.spacing.unit * 3, + margin: theme.spacing(3), }, }); diff --git a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js index d1da9b912a58e7..2535532134547d 100644 --- a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js +++ b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js @@ -12,10 +12,10 @@ const useStyles = makeStyles(theme => ({ display: 'flex', }, formControl: { - margin: theme.spacing.unit * 3, + margin: theme.spacing(3), }, group: { - margin: `${theme.spacing.unit}px 0`, + margin: theme.spacing(1, 0), }, })); diff --git a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js index f32664726beaf8..7c72391f45ac5f 100644 --- a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js +++ b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js @@ -13,10 +13,10 @@ const styles = theme => ({ display: 'flex', }, formControl: { - margin: theme.spacing.unit * 3, + margin: theme.spacing(3), }, group: { - margin: `${theme.spacing.unit}px 0`, + margin: theme.spacing(1, 0), }, }); diff --git a/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js b/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js index 6939ee399a2d1b..028bf07a9420d2 100644 --- a/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js +++ b/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js @@ -9,10 +9,10 @@ import Button from '@material-ui/core/Button'; const useStyles = makeStyles(theme => ({ button: { display: 'block', - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 120, }, })); diff --git a/docs/src/pages/demos/selects/ControlledOpenSelect.js b/docs/src/pages/demos/selects/ControlledOpenSelect.js index c444a2e94abeb5..b0945c2d68e1cc 100644 --- a/docs/src/pages/demos/selects/ControlledOpenSelect.js +++ b/docs/src/pages/demos/selects/ControlledOpenSelect.js @@ -10,10 +10,10 @@ import Button from '@material-ui/core/Button'; const styles = theme => ({ button: { display: 'block', - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 120, }, }); diff --git a/docs/src/pages/demos/selects/CustomizedSelects.js b/docs/src/pages/demos/selects/CustomizedSelects.js index a335c8a4b02a2e..1d7826cd681b1d 100644 --- a/docs/src/pages/demos/selects/CustomizedSelects.js +++ b/docs/src/pages/demos/selects/CustomizedSelects.js @@ -11,7 +11,7 @@ import InputBase from '@material-ui/core/InputBase'; const BootstrapInput = withStyles(theme => ({ root: { 'label + &': { - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, }, input: { @@ -50,7 +50,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, bootstrapFormLabel: { fontSize: 18, diff --git a/docs/src/pages/demos/selects/DialogSelect.hooks.js b/docs/src/pages/demos/selects/DialogSelect.hooks.js index aeaf4a977d3f94..77b1ce1672e56d 100644 --- a/docs/src/pages/demos/selects/DialogSelect.hooks.js +++ b/docs/src/pages/demos/selects/DialogSelect.hooks.js @@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 120, }, })); diff --git a/docs/src/pages/demos/selects/DialogSelect.js b/docs/src/pages/demos/selects/DialogSelect.js index 97086e042b0fd6..a3acdf7822054c 100644 --- a/docs/src/pages/demos/selects/DialogSelect.js +++ b/docs/src/pages/demos/selects/DialogSelect.js @@ -18,7 +18,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 120, }, }); diff --git a/docs/src/pages/demos/selects/MultipleSelect.hooks.js b/docs/src/pages/demos/selects/MultipleSelect.hooks.js index 0fdea873aa2380..d7bf240b8c0783 100644 --- a/docs/src/pages/demos/selects/MultipleSelect.hooks.js +++ b/docs/src/pages/demos/selects/MultipleSelect.hooks.js @@ -16,7 +16,7 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 120, maxWidth: 300, }, @@ -25,10 +25,10 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, chip: { - margin: theme.spacing.unit / 4, + margin: 2, }, noLabel: { - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, })); diff --git a/docs/src/pages/demos/selects/MultipleSelect.js b/docs/src/pages/demos/selects/MultipleSelect.js index 061e0887eb919e..498f33642437c2 100644 --- a/docs/src/pages/demos/selects/MultipleSelect.js +++ b/docs/src/pages/demos/selects/MultipleSelect.js @@ -17,7 +17,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 120, maxWidth: 300, }, @@ -26,10 +26,10 @@ const styles = theme => ({ flexWrap: 'wrap', }, chip: { - margin: theme.spacing.unit / 4, + margin: 2, }, noLabel: { - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, }); diff --git a/docs/src/pages/demos/selects/NativeSelects.hooks.js b/docs/src/pages/demos/selects/NativeSelects.hooks.js index 4c43055932e8a1..e25702854e05e9 100644 --- a/docs/src/pages/demos/selects/NativeSelects.hooks.js +++ b/docs/src/pages/demos/selects/NativeSelects.hooks.js @@ -16,11 +16,11 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 120, }, selectEmpty: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), }, })); diff --git a/docs/src/pages/demos/selects/NativeSelects.js b/docs/src/pages/demos/selects/NativeSelects.js index 63582f1794aa15..e091ca6b65d64a 100644 --- a/docs/src/pages/demos/selects/NativeSelects.js +++ b/docs/src/pages/demos/selects/NativeSelects.js @@ -17,11 +17,11 @@ const styles = theme => ({ flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 120, }, selectEmpty: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/selects/SimpleSelect.hooks.js b/docs/src/pages/demos/selects/SimpleSelect.hooks.js index 4a093f0655ee4c..748f01323c3e63 100644 --- a/docs/src/pages/demos/selects/SimpleSelect.hooks.js +++ b/docs/src/pages/demos/selects/SimpleSelect.hooks.js @@ -16,11 +16,11 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 120, }, selectEmpty: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), }, })); diff --git a/docs/src/pages/demos/selects/SimpleSelect.js b/docs/src/pages/demos/selects/SimpleSelect.js index 76644f1cc5f5fc..bbae533265b986 100644 --- a/docs/src/pages/demos/selects/SimpleSelect.js +++ b/docs/src/pages/demos/selects/SimpleSelect.js @@ -17,11 +17,11 @@ const styles = theme => ({ flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 120, }, selectEmpty: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), }, }); diff --git a/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js index a0ac3b271ae20f..53abfd8207e54a 100644 --- a/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js +++ b/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js @@ -8,7 +8,7 @@ import CloseIcon from '@material-ui/icons/Close'; const styles = theme => ({ close: { - padding: theme.spacing.unit / 2, + padding: theme.spacing(0.5), }, }); diff --git a/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js b/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js index c9b072333986bb..9fabea86bb7ab6 100644 --- a/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js +++ b/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js @@ -39,7 +39,7 @@ const useStyles1 = makeStyles(theme => ({ }, iconVariant: { opacity: 0.9, - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, message: { display: 'flex', @@ -87,7 +87,7 @@ MySnackbarContentWrapper.propTypes = { const useStyles2 = makeStyles(theme => ({ margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, })); diff --git a/docs/src/pages/demos/snackbars/CustomizedSnackbars.js b/docs/src/pages/demos/snackbars/CustomizedSnackbars.js index aa1c23b9036ff5..1ca053578e5645 100644 --- a/docs/src/pages/demos/snackbars/CustomizedSnackbars.js +++ b/docs/src/pages/demos/snackbars/CustomizedSnackbars.js @@ -39,7 +39,7 @@ const styles1 = theme => ({ }, iconVariant: { opacity: 0.9, - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, message: { display: 'flex', @@ -89,7 +89,7 @@ const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent); const styles2 = theme => ({ margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js index 0ef58baeb4e077..6687837a839bea 100644 --- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js +++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js @@ -26,12 +26,12 @@ const useStyles = makeStyles(theme => ({ marginRight: 20, }, button: { - marginBottom: theme.spacing.unit, + marginBottom: theme.spacing(1), }, fab: { position: 'absolute', - bottom: theme.spacing.unit * 2, - right: theme.spacing.unit * 2, + bottom: theme.spacing(2), + right: theme.spacing(2), }, fabMoveUp: { transform: 'translate3d(0, -46px, 0)', diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js index 07864731a53012..05a8efdc351130 100644 --- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js +++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js @@ -27,12 +27,12 @@ const styles = theme => ({ marginRight: 20, }, button: { - marginBottom: theme.spacing.unit, + marginBottom: theme.spacing(1), }, fab: { position: 'absolute', - bottom: theme.spacing.unit * 2, - right: theme.spacing.unit * 2, + bottom: theme.spacing(2), + right: theme.spacing(2), }, fabMoveUp: { transform: 'translate3d(0, -46px, 0)', diff --git a/docs/src/pages/demos/snackbars/LongTextSnackbar.js b/docs/src/pages/demos/snackbars/LongTextSnackbar.js index 0535fe6e2f222f..840186019de595 100644 --- a/docs/src/pages/demos/snackbars/LongTextSnackbar.js +++ b/docs/src/pages/demos/snackbars/LongTextSnackbar.js @@ -12,7 +12,7 @@ const action = ( const styles = theme => ({ snackbar: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js b/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js index 9ed3f3ae931830..c6f57532811180 100644 --- a/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js +++ b/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js @@ -7,7 +7,7 @@ import CloseIcon from '@material-ui/icons/Close'; const useStyles = makeStyles(theme => ({ close: { - padding: theme.spacing.unit / 2, + padding: theme.spacing(0.5), }, })); diff --git a/docs/src/pages/demos/snackbars/SimpleSnackbar.js b/docs/src/pages/demos/snackbars/SimpleSnackbar.js index 1b4ab641594e34..78fcb48deef7cb 100644 --- a/docs/src/pages/demos/snackbars/SimpleSnackbar.js +++ b/docs/src/pages/demos/snackbars/SimpleSnackbar.js @@ -8,7 +8,7 @@ import CloseIcon from '@material-ui/icons/Close'; const styles = theme => ({ close: { - padding: theme.spacing.unit / 2, + padding: theme.spacing(0.5), }, }); diff --git a/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js b/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js index f91d5813240a5c..dd181cfff2b163 100644 --- a/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js +++ b/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js @@ -12,11 +12,11 @@ const useStyles = makeStyles(theme => ({ width: '90%', }, button: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, connectorActive: { '& $connectorLine': { diff --git a/docs/src/pages/demos/steppers/CustomizedStepper.js b/docs/src/pages/demos/steppers/CustomizedStepper.js index 02e1a8ff32b5b2..f15e27c4cdfc01 100644 --- a/docs/src/pages/demos/steppers/CustomizedStepper.js +++ b/docs/src/pages/demos/steppers/CustomizedStepper.js @@ -13,11 +13,11 @@ const styles = theme => ({ width: '90%', }, button: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, connectorActive: { '& $connectorLine': { diff --git a/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js index 811b702cee5ce0..a74cb53af42da5 100644 --- a/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js +++ b/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js @@ -11,11 +11,11 @@ const useStyles = makeStyles(theme => ({ width: '90%', }, backButton: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, })); diff --git a/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.js b/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.js index ce63480c8c9ca7..f349a9adc0d018 100644 --- a/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.js +++ b/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.js @@ -12,11 +12,11 @@ const styles = theme => ({ width: '90%', }, backButton: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js index 7c59cdd07e381c..51d4359c3dac5f 100644 --- a/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js +++ b/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js @@ -11,11 +11,11 @@ const useStyles = makeStyles(theme => ({ width: '90%', }, button: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, })); diff --git a/docs/src/pages/demos/steppers/HorizontalLinearStepper.js b/docs/src/pages/demos/steppers/HorizontalLinearStepper.js index e7bc7b7d23415d..59b4fa9136407b 100644 --- a/docs/src/pages/demos/steppers/HorizontalLinearStepper.js +++ b/docs/src/pages/demos/steppers/HorizontalLinearStepper.js @@ -12,11 +12,11 @@ const styles = theme => ({ width: '90%', }, button: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js index dca8a99e68fe4f..59fc5e2c2695b2 100644 --- a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js +++ b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js @@ -11,17 +11,17 @@ const useStyles = makeStyles(theme => ({ width: '90%', }, button: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, backButton: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, completed: { display: 'inline-block', }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, })); diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js index d2cbb963e11b64..57c89bcc0929d0 100644 --- a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js +++ b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js @@ -12,17 +12,17 @@ const styles = theme => ({ width: '90%', }, button: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, backButton: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, completed: { display: 'inline-block', }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js index 2c62c6f0422ae6..41599dda078724 100644 --- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js +++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js @@ -11,14 +11,14 @@ const useStyles = makeStyles(theme => ({ width: '90%', }, button: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, completed: { display: 'inline-block', }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, })); diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js index 115d70ace7f2cd..4565fca206bb9c 100644 --- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js +++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js @@ -12,14 +12,14 @@ const styles = theme => ({ width: '90%', }, button: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, completed: { display: 'inline-block', }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js index a2e1e4d00ec3ca..982bf4310fe66a 100644 --- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js +++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js @@ -11,11 +11,11 @@ const useStyles = makeStyles(theme => ({ width: '90%', }, button: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, })); diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js index 34197a1aa4ddc0..7ad353fdc3e411 100644 --- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js +++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js @@ -12,11 +12,11 @@ const styles = theme => ({ width: '90%', }, button: { - marginRight: theme.spacing.unit, + marginRight: theme.spacing(1), }, instructions: { - marginTop: theme.spacing.unit, - marginBottom: theme.spacing.unit, + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.hooks.js b/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.hooks.js index ed56b59e8d64d4..8fbe8dbe655567 100644 --- a/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.hooks.js +++ b/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.hooks.js @@ -48,7 +48,7 @@ const useStyles = makeStyles(theme => ({ display: 'flex', alignItems: 'center', height: 50, - paddingLeft: theme.spacing.unit * 4, + paddingLeft: theme.spacing(4), backgroundColor: theme.palette.background.default, }, img: { diff --git a/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.js b/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.js index 015d65318b2c14..4a2a78d9a719a6 100644 --- a/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.js +++ b/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.js @@ -49,7 +49,7 @@ const styles = theme => ({ display: 'flex', alignItems: 'center', height: 50, - paddingLeft: theme.spacing.unit * 4, + paddingLeft: theme.spacing(4), backgroundColor: theme.palette.background.default, }, img: { diff --git a/docs/src/pages/demos/steppers/TextMobileStepper.hooks.js b/docs/src/pages/demos/steppers/TextMobileStepper.hooks.js index 8f6846bfd96e6c..1c928b278f39bf 100644 --- a/docs/src/pages/demos/steppers/TextMobileStepper.hooks.js +++ b/docs/src/pages/demos/steppers/TextMobileStepper.hooks.js @@ -44,7 +44,7 @@ const useStyles = makeStyles(theme => ({ display: 'flex', alignItems: 'center', height: 50, - paddingLeft: theme.spacing.unit * 4, + paddingLeft: theme.spacing(4), backgroundColor: theme.palette.background.default, }, img: { diff --git a/docs/src/pages/demos/steppers/TextMobileStepper.js b/docs/src/pages/demos/steppers/TextMobileStepper.js index 86f34b1781aa9d..98dcbd5265c631 100644 --- a/docs/src/pages/demos/steppers/TextMobileStepper.js +++ b/docs/src/pages/demos/steppers/TextMobileStepper.js @@ -45,7 +45,7 @@ const styles = theme => ({ display: 'flex', alignItems: 'center', height: 50, - paddingLeft: theme.spacing.unit * 4, + paddingLeft: theme.spacing(4), backgroundColor: theme.palette.background.default, }, img: { diff --git a/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js b/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js index b248d0b0ca10cc..d2e5fcd09a5a89 100644 --- a/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js +++ b/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js @@ -13,14 +13,14 @@ const useStyles = makeStyles(theme => ({ width: '90%', }, button: { - marginTop: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginTop: theme.spacing(1), + marginRight: theme.spacing(1), }, actionsContainer: { - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), }, resetContainer: { - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, })); diff --git a/docs/src/pages/demos/steppers/VerticalLinearStepper.js b/docs/src/pages/demos/steppers/VerticalLinearStepper.js index e2866b501e1d37..9f635fb6c0cdec 100644 --- a/docs/src/pages/demos/steppers/VerticalLinearStepper.js +++ b/docs/src/pages/demos/steppers/VerticalLinearStepper.js @@ -14,14 +14,14 @@ const styles = theme => ({ width: '90%', }, button: { - marginTop: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginTop: theme.spacing(1), + marginRight: theme.spacing(1), }, actionsContainer: { - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), }, resetContainer: { - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, }); diff --git a/docs/src/pages/demos/tables/CustomPaginationActionsTable.hooks.js b/docs/src/pages/demos/tables/CustomPaginationActionsTable.hooks.js index 7376f4bd0f5922..025e9efd6a0a8e 100644 --- a/docs/src/pages/demos/tables/CustomPaginationActionsTable.hooks.js +++ b/docs/src/pages/demos/tables/CustomPaginationActionsTable.hooks.js @@ -18,7 +18,7 @@ const useStyles1 = makeStyles(theme => ({ root: { flexShrink: 0, color: theme.palette.text.secondary, - marginLeft: theme.spacing.unit * 2.5, + marginLeft: theme.spacing(2.5), }, })); @@ -89,7 +89,7 @@ function createData(name, calories, fat) { const useStyles2 = makeStyles(theme => ({ root: { width: '100%', - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, table: { minWidth: 500, diff --git a/docs/src/pages/demos/tables/CustomPaginationActionsTable.js b/docs/src/pages/demos/tables/CustomPaginationActionsTable.js index 799079eaea6e4a..3af43a22a1680e 100644 --- a/docs/src/pages/demos/tables/CustomPaginationActionsTable.js +++ b/docs/src/pages/demos/tables/CustomPaginationActionsTable.js @@ -18,7 +18,7 @@ const actionsStyles = theme => ({ root: { flexShrink: 0, color: theme.palette.text.secondary, - marginLeft: theme.spacing.unit * 2.5, + marginLeft: theme.spacing(2.5), }, }); @@ -102,7 +102,7 @@ function createData(name, calories, fat) { const styles = theme => ({ root: { width: '100%', - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, table: { minWidth: 500, diff --git a/docs/src/pages/demos/tables/CustomizedTable.js b/docs/src/pages/demos/tables/CustomizedTable.js index 84482b0f145812..49631769b8a597 100644 --- a/docs/src/pages/demos/tables/CustomizedTable.js +++ b/docs/src/pages/demos/tables/CustomizedTable.js @@ -21,7 +21,7 @@ const CustomTableCell = withStyles(theme => ({ const styles = theme => ({ root: { width: '100%', - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), overflowX: 'auto', }, table: { diff --git a/docs/src/pages/demos/tables/EnhancedTable.hooks.js b/docs/src/pages/demos/tables/EnhancedTable.hooks.js index cee9a25f280bb9..b995373acd8f81 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.hooks.js +++ b/docs/src/pages/demos/tables/EnhancedTable.hooks.js @@ -114,7 +114,7 @@ EnhancedTableHead.propTypes = { const useToolbarStyles = makeStyles(theme => ({ root: { - paddingRight: theme.spacing.unit, + paddingRight: theme.spacing(1), }, highlight: theme.palette.type === 'light' @@ -185,7 +185,7 @@ EnhancedTableToolbar.propTypes = { const useStyles = makeStyles(theme => ({ root: { width: '100%', - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, table: { minWidth: 1020, diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js index ea0bf86cb351f4..f7d6143191cdf2 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.js +++ b/docs/src/pages/demos/tables/EnhancedTable.js @@ -117,7 +117,7 @@ EnhancedTableHead.propTypes = { const toolbarStyles = theme => ({ root: { - paddingRight: theme.spacing.unit, + paddingRight: theme.spacing(1), }, highlight: theme.palette.type === 'light' @@ -190,7 +190,7 @@ EnhancedTableToolbar = withStyles(toolbarStyles)(EnhancedTableToolbar); const styles = theme => ({ root: { width: '100%', - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, table: { minWidth: 1020, diff --git a/docs/src/pages/demos/tables/SimpleTable.js b/docs/src/pages/demos/tables/SimpleTable.js index a3c0ede6806a72..ebe5eb41d42055 100644 --- a/docs/src/pages/demos/tables/SimpleTable.js +++ b/docs/src/pages/demos/tables/SimpleTable.js @@ -11,7 +11,7 @@ import Paper from '@material-ui/core/Paper'; const styles = theme => ({ root: { width: '100%', - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), overflowX: 'auto', }, table: { diff --git a/docs/src/pages/demos/tables/SpanningTable.js b/docs/src/pages/demos/tables/SpanningTable.js index cf4a72eb88a528..fee73c68851b34 100644 --- a/docs/src/pages/demos/tables/SpanningTable.js +++ b/docs/src/pages/demos/tables/SpanningTable.js @@ -13,7 +13,7 @@ const TAX_RATE = 0.07; const styles = theme => ({ root: { width: '100%', - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), overflowX: 'auto', }, table: { diff --git a/docs/src/pages/demos/tabs/CustomizedTabs.hooks.js b/docs/src/pages/demos/tabs/CustomizedTabs.hooks.js index 8127aee54a21af..4e9d7dea675c8d 100644 --- a/docs/src/pages/demos/tabs/CustomizedTabs.hooks.js +++ b/docs/src/pages/demos/tabs/CustomizedTabs.hooks.js @@ -19,7 +19,7 @@ const useStyles = makeStyles(theme => ({ textTransform: 'initial', minWidth: 72, fontWeight: theme.typography.fontWeightRegular, - marginRight: theme.spacing.unit * 4, + marginRight: theme.spacing(4), fontFamily: [ '-apple-system', 'BlinkMacSystemFont', @@ -46,7 +46,7 @@ const useStyles = makeStyles(theme => ({ }, tabSelected: {}, typography: { - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, })); diff --git a/docs/src/pages/demos/tabs/CustomizedTabs.js b/docs/src/pages/demos/tabs/CustomizedTabs.js index 1233035d750945..3e875655b7b57a 100644 --- a/docs/src/pages/demos/tabs/CustomizedTabs.js +++ b/docs/src/pages/demos/tabs/CustomizedTabs.js @@ -20,7 +20,7 @@ const styles = theme => ({ textTransform: 'initial', minWidth: 72, fontWeight: theme.typography.fontWeightRegular, - marginRight: theme.spacing.unit * 4, + marginRight: theme.spacing(4), fontFamily: [ '-apple-system', 'BlinkMacSystemFont', @@ -47,7 +47,7 @@ const styles = theme => ({ }, tabSelected: {}, typography: { - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), }, }); diff --git a/docs/src/pages/demos/text-fields/ComposedTextField.js b/docs/src/pages/demos/text-fields/ComposedTextField.js index 4264026a145469..478c9941e33133 100644 --- a/docs/src/pages/demos/text-fields/ComposedTextField.js +++ b/docs/src/pages/demos/text-fields/ComposedTextField.js @@ -15,7 +15,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/text-fields/ComposedTextField.tsx b/docs/src/pages/demos/text-fields/ComposedTextField.tsx index b49745de704cc9..1a7661f16d5fb7 100644 --- a/docs/src/pages/demos/text-fields/ComposedTextField.tsx +++ b/docs/src/pages/demos/text-fields/ComposedTextField.tsx @@ -16,7 +16,7 @@ const styles = (theme: Theme) => flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.js b/docs/src/pages/demos/text-fields/CustomizedInputs.js index fa01bd82148575..73959e0dfc5ac4 100644 --- a/docs/src/pages/demos/text-fields/CustomizedInputs.js +++ b/docs/src/pages/demos/text-fields/CustomizedInputs.js @@ -15,7 +15,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, cssLabel: { '&$cssFocused': { @@ -36,7 +36,7 @@ const styles = theme => ({ notchedOutline: {}, bootstrapRoot: { 'label + &': { - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, }, bootstrapInput: { diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.tsx b/docs/src/pages/demos/text-fields/CustomizedInputs.tsx index f499d9e01a4b78..7c463454a15813 100644 --- a/docs/src/pages/demos/text-fields/CustomizedInputs.tsx +++ b/docs/src/pages/demos/text-fields/CustomizedInputs.tsx @@ -23,7 +23,7 @@ const styles = (theme: Theme) => flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, cssLabel: { '&$cssFocused': { @@ -44,7 +44,7 @@ const styles = (theme: Theme) => notchedOutline: {}, bootstrapRoot: { 'label + &': { - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, }, bootstrapInput: { diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js b/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js index 327c8a7de05864..cb17c94a115df0 100644 --- a/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js +++ b/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js @@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, textField: { flexBasis: 200, diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.js b/docs/src/pages/demos/text-fields/FilledInputAdornments.js index 128b8fe469c32c..ccd35f1bbc40a4 100644 --- a/docs/src/pages/demos/text-fields/FilledInputAdornments.js +++ b/docs/src/pages/demos/text-fields/FilledInputAdornments.js @@ -15,7 +15,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, textField: { flexBasis: 200, diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx b/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx index f57ca517514f8b..4179b3e65ad061 100644 --- a/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx +++ b/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx @@ -16,7 +16,7 @@ const styles = (theme: Theme) => flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, textField: { flexBasis: 200, diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js b/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js index c8ecd21f0ccabc..877d6474426e9f 100644 --- a/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js +++ b/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js @@ -10,8 +10,8 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), }, dense: { marginTop: 16, diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.js b/docs/src/pages/demos/text-fields/FilledTextFields.js index f82585e7e230aa..493ee37a0e6065 100644 --- a/docs/src/pages/demos/text-fields/FilledTextFields.js +++ b/docs/src/pages/demos/text-fields/FilledTextFields.js @@ -11,8 +11,8 @@ const styles = theme => ({ flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), }, dense: { marginTop: 16, diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.tsx b/docs/src/pages/demos/text-fields/FilledTextFields.tsx index 094a8414ac41e5..f8b7e412d4188c 100644 --- a/docs/src/pages/demos/text-fields/FilledTextFields.tsx +++ b/docs/src/pages/demos/text-fields/FilledTextFields.tsx @@ -12,8 +12,8 @@ const styles = (theme: Theme) => flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), }, dense: { marginTop: 16, diff --git a/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js b/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js index 7cadb307620698..a0c5d4b95bbfe1 100644 --- a/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js +++ b/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js @@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, })); diff --git a/docs/src/pages/demos/text-fields/FormattedInputs.js b/docs/src/pages/demos/text-fields/FormattedInputs.js index cbb0e65f1d4c5b..5a900820d34cdf 100644 --- a/docs/src/pages/demos/text-fields/FormattedInputs.js +++ b/docs/src/pages/demos/text-fields/FormattedInputs.js @@ -14,7 +14,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/text-fields/FormattedInputs.tsx b/docs/src/pages/demos/text-fields/FormattedInputs.tsx index e1bc3f7ca7bf0f..dfd5508c90a03f 100644 --- a/docs/src/pages/demos/text-fields/FormattedInputs.tsx +++ b/docs/src/pages/demos/text-fields/FormattedInputs.tsx @@ -15,7 +15,7 @@ const styles = (theme: Theme) => flexWrap: 'wrap', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/text-fields/InputAdornments.hooks.js b/docs/src/pages/demos/text-fields/InputAdornments.hooks.js index 0968c78a4e2f23..7eabb044d6ea4a 100644 --- a/docs/src/pages/demos/text-fields/InputAdornments.hooks.js +++ b/docs/src/pages/demos/text-fields/InputAdornments.hooks.js @@ -18,10 +18,10 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, withoutLabel: { - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, textField: { flexBasis: 200, diff --git a/docs/src/pages/demos/text-fields/InputAdornments.js b/docs/src/pages/demos/text-fields/InputAdornments.js index a162d8bc098758..9740024bba9dcf 100644 --- a/docs/src/pages/demos/text-fields/InputAdornments.js +++ b/docs/src/pages/demos/text-fields/InputAdornments.js @@ -19,10 +19,10 @@ const styles = theme => ({ flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, withoutLabel: { - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, textField: { flexBasis: 200, diff --git a/docs/src/pages/demos/text-fields/InputAdornments.tsx b/docs/src/pages/demos/text-fields/InputAdornments.tsx index 630ae4b1a571c6..51cc0447e70644 100644 --- a/docs/src/pages/demos/text-fields/InputAdornments.tsx +++ b/docs/src/pages/demos/text-fields/InputAdornments.tsx @@ -20,10 +20,10 @@ const styles = (theme: Theme) => flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, withoutLabel: { - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, textField: { flexBasis: 200, diff --git a/docs/src/pages/demos/text-fields/InputWithIcon.js b/docs/src/pages/demos/text-fields/InputWithIcon.js index d96bcabc23e79c..890d59600eb0f3 100644 --- a/docs/src/pages/demos/text-fields/InputWithIcon.js +++ b/docs/src/pages/demos/text-fields/InputWithIcon.js @@ -11,7 +11,7 @@ import AccountCircle from '@material-ui/icons/AccountCircle'; const styles = theme => ({ margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); @@ -45,7 +45,7 @@ function InputWithIcon(props) { />
- + diff --git a/docs/src/pages/demos/text-fields/InputWithIcon.tsx b/docs/src/pages/demos/text-fields/InputWithIcon.tsx index a3eeae0a7d4130..f8dc50e5e08b7c 100644 --- a/docs/src/pages/demos/text-fields/InputWithIcon.tsx +++ b/docs/src/pages/demos/text-fields/InputWithIcon.tsx @@ -12,7 +12,7 @@ import AccountCircle from '@material-ui/icons/AccountCircle'; const styles = (theme: Theme) => createStyles({ margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); @@ -47,7 +47,7 @@ function InputWithIcon(props: Props) { }} />
- + diff --git a/docs/src/pages/demos/text-fields/Inputs.js b/docs/src/pages/demos/text-fields/Inputs.js index 03b0eba7272b6b..129a5e6cf77263 100644 --- a/docs/src/pages/demos/text-fields/Inputs.js +++ b/docs/src/pages/demos/text-fields/Inputs.js @@ -9,7 +9,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, input: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/text-fields/Inputs.tsx b/docs/src/pages/demos/text-fields/Inputs.tsx index d31199f3f8a4e9..77e5a9ef4935c9 100644 --- a/docs/src/pages/demos/text-fields/Inputs.tsx +++ b/docs/src/pages/demos/text-fields/Inputs.tsx @@ -10,7 +10,7 @@ const styles = (theme: Theme) => flexWrap: 'wrap', }, input: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js index 5c2c83742179d1..bc329b857373e0 100644 --- a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js +++ b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js @@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, textField: { flexBasis: 200, diff --git a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js index 7e63c0661333c4..56395cc5527faf 100644 --- a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js +++ b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js @@ -15,7 +15,7 @@ const styles = theme => ({ flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, textField: { flexBasis: 200, diff --git a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx index 8dee7d43c8ecf7..0d5b15ebf81762 100644 --- a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx +++ b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx @@ -16,7 +16,7 @@ const styles = (theme: Theme) => flexWrap: 'wrap', }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, textField: { flexBasis: 200, diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js b/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js index dedafd06c6aeaa..22312260edcbd5 100644 --- a/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js +++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js @@ -10,11 +10,11 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), }, dense: { - marginTop: 16, + marginTop: theme.spacing(2), }, menu: { width: 200, diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.js b/docs/src/pages/demos/text-fields/OutlinedTextFields.js index a736cc9b147104..e968b55c5bca77 100644 --- a/docs/src/pages/demos/text-fields/OutlinedTextFields.js +++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.js @@ -11,11 +11,11 @@ const styles = theme => ({ flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), }, dense: { - marginTop: 16, + marginTop: theme.spacing(2), }, menu: { width: 200, diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx b/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx index bc08f421d93acf..e8d4275cf8cf83 100644 --- a/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx +++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx @@ -12,11 +12,11 @@ const styles = (theme: Theme) => flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), }, dense: { - marginTop: 16, + marginTop: theme.spacing(2), }, menu: { width: 200, diff --git a/docs/src/pages/demos/text-fields/TextFieldMargins.js b/docs/src/pages/demos/text-fields/TextFieldMargins.js index 61571745fbe3e8..a79af8c3f56c60 100644 --- a/docs/src/pages/demos/text-fields/TextFieldMargins.js +++ b/docs/src/pages/demos/text-fields/TextFieldMargins.js @@ -9,8 +9,8 @@ const styles = theme => ({ flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), width: 200, }, }); diff --git a/docs/src/pages/demos/text-fields/TextFieldMargins.tsx b/docs/src/pages/demos/text-fields/TextFieldMargins.tsx index 2c7b9035e26bbb..7821fabd310f4f 100644 --- a/docs/src/pages/demos/text-fields/TextFieldMargins.tsx +++ b/docs/src/pages/demos/text-fields/TextFieldMargins.tsx @@ -10,8 +10,8 @@ const styles = (theme: Theme) => flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), width: 200, }, }); diff --git a/docs/src/pages/demos/text-fields/TextFields.hooks.js b/docs/src/pages/demos/text-fields/TextFields.hooks.js index d1b3d5b5d0b537..e5d4d4975d81c7 100644 --- a/docs/src/pages/demos/text-fields/TextFields.hooks.js +++ b/docs/src/pages/demos/text-fields/TextFields.hooks.js @@ -10,8 +10,8 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), width: 200, }, dense: { diff --git a/docs/src/pages/demos/text-fields/TextFields.js b/docs/src/pages/demos/text-fields/TextFields.js index 1562740657f38e..17f088cb79f070 100644 --- a/docs/src/pages/demos/text-fields/TextFields.js +++ b/docs/src/pages/demos/text-fields/TextFields.js @@ -11,8 +11,8 @@ const styles = theme => ({ flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), width: 200, }, dense: { diff --git a/docs/src/pages/demos/text-fields/TextFields.tsx b/docs/src/pages/demos/text-fields/TextFields.tsx index 8d105c5584584d..1f6d42942bcc1b 100644 --- a/docs/src/pages/demos/text-fields/TextFields.tsx +++ b/docs/src/pages/demos/text-fields/TextFields.tsx @@ -12,8 +12,8 @@ const styles = (theme: Theme) => flexWrap: 'wrap', }, textField: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), width: 200, }, dense: { diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js b/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js index b13d6b988f4efd..e23cabbec87526 100644 --- a/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js +++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js @@ -53,7 +53,7 @@ function arrowGenerator(color) { const useStyles = makeStyles(theme => ({ button: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, lightTooltip: { backgroundColor: theme.palette.common.white, diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.js b/docs/src/pages/demos/tooltips/CustomizedTooltips.js index 70b9e1c128a8e1..033ed1e2c3fde7 100644 --- a/docs/src/pages/demos/tooltips/CustomizedTooltips.js +++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.js @@ -54,7 +54,7 @@ function arrowGenerator(color) { const styles = theme => ({ button: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, lightTooltip: { backgroundColor: theme.palette.common.white, diff --git a/docs/src/pages/demos/tooltips/InteractiveTooltips.js b/docs/src/pages/demos/tooltips/InteractiveTooltips.js index a4f8777aa9f0f4..7a7720028bd206 100644 --- a/docs/src/pages/demos/tooltips/InteractiveTooltips.js +++ b/docs/src/pages/demos/tooltips/InteractiveTooltips.js @@ -6,7 +6,7 @@ import Tooltip from '@material-ui/core/Tooltip'; const styles = theme => ({ button: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, }); diff --git a/docs/src/pages/demos/tooltips/PositionedTooltips.js b/docs/src/pages/demos/tooltips/PositionedTooltips.js index 95e5a0864b084c..4de9e0ecd26c65 100644 --- a/docs/src/pages/demos/tooltips/PositionedTooltips.js +++ b/docs/src/pages/demos/tooltips/PositionedTooltips.js @@ -42,7 +42,7 @@ function PositionedTooltips(props) { - + diff --git a/docs/src/pages/demos/tooltips/SimpleTooltips.js b/docs/src/pages/demos/tooltips/SimpleTooltips.js index 55a3bdfda6aae8..36ded3f20cb0ba 100644 --- a/docs/src/pages/demos/tooltips/SimpleTooltips.js +++ b/docs/src/pages/demos/tooltips/SimpleTooltips.js @@ -9,12 +9,12 @@ import Tooltip from '@material-ui/core/Tooltip'; const styles = theme => ({ fab: { - margin: theme.spacing.unit * 2, + margin: theme.spacing(2), }, absolute: { position: 'absolute', - bottom: theme.spacing.unit * 2, - right: theme.spacing.unit * 3, + bottom: theme.spacing(2), + right: theme.spacing(3), }, }); diff --git a/docs/src/pages/demos/tooltips/VariableWidth.js b/docs/src/pages/demos/tooltips/VariableWidth.js index f8fb7d30de8cde..80b525a1510f49 100644 --- a/docs/src/pages/demos/tooltips/VariableWidth.js +++ b/docs/src/pages/demos/tooltips/VariableWidth.js @@ -6,7 +6,7 @@ import Tooltip from '@material-ui/core/Tooltip'; const styles = theme => ({ button: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, customWidth: { maxWidth: 500, @@ -17,9 +17,9 @@ const styles = theme => ({ }); const longText = ` -Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus. -Praesent non nunc mollis, fermentum neque at, semper arcu. -Nullam eget est sed sem iaculis gravida eget vitae justo. +Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus. +Praesent non nunc mollis, fermentum neque at, semper arcu. +Nullam eget est sed sem iaculis gravida eget vitae justo. `; function VariableWidth({ classes }) { diff --git a/docs/src/pages/discover-more/showcase/Showcase.js b/docs/src/pages/discover-more/showcase/Showcase.js index 22ab5048229a41..e25e1b82e666a1 100644 --- a/docs/src/pages/discover-more/showcase/Showcase.js +++ b/docs/src/pages/discover-more/showcase/Showcase.js @@ -19,25 +19,25 @@ const styles = theme => ({ root: { backgroundColor: theme.palette.background.default, // Hide the demo container padding - margin: -theme.spacing.unit * 3, + margin: -theme.spacing(3), // Maintain alignment with the markdown text [theme.breakpoints.down('xs')]: { padding: 30, }, }, formControl: { - marginBottom: theme.spacing.unit * 4, + marginBottom: theme.spacing(4), minWidth: 120, }, title: { - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), }, card: { - marginBottom: theme.spacing.unit, + marginBottom: theme.spacing(1), maxWidth: 600, }, description: { - marginBottom: theme.spacing.unit * 6, + marginBottom: theme.spacing(6), }, cardMedia: { paddingTop: '75%', // 4:3 diff --git a/docs/src/pages/discover-more/team/Team.js b/docs/src/pages/discover-more/team/Team.js index 07c7c1f77b5990..f1126907b0d3c4 100644 --- a/docs/src/pages/discover-more/team/Team.js +++ b/docs/src/pages/discover-more/team/Team.js @@ -89,26 +89,26 @@ const members = [ const styles = theme => ({ details: { - margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px 0`, + margin: theme.spacing(1, 1, 1, 0), }, cover: { - width: theme.spacing.unit * 10, - height: theme.spacing.unit * 10, - margin: theme.spacing.unit * 2, + width: theme.spacing(10), + height: theme.spacing(10), + margin: theme.spacing(2), borderRadius: '50%', flexShrink: 0, backgroundColor: theme.palette.background.default, }, icon: { fontSize: 18, - padding: theme.spacing.unit, + padding: theme.spacing(1), }, }); function Team(props) { const { classes } = props; return ( - + {members.map(member => ( diff --git a/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js b/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js index ae46a87faa40da..4d8cf49c0b99bf 100644 --- a/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js +++ b/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js @@ -88,7 +88,7 @@ function PageLayoutExamples(props) { const { classes, t } = props; return ( - + {layouts(t).map(layout => ( diff --git a/docs/src/pages/getting-started/page-layout-examples/album/Album.js b/docs/src/pages/getting-started/page-layout-examples/album/Album.js index 2a634ddf808156..0b06d77b34c938 100644 --- a/docs/src/pages/getting-started/page-layout-examples/album/Album.js +++ b/docs/src/pages/getting-started/page-layout-examples/album/Album.js @@ -19,7 +19,7 @@ const styles = theme => ({ position: 'relative', }, icon: { - marginRight: theme.spacing.unit * 2, + marginRight: theme.spacing(2), }, heroUnit: { backgroundColor: theme.palette.background.paper, @@ -27,23 +27,23 @@ const styles = theme => ({ heroContent: { maxWidth: 600, margin: '0 auto', - padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`, + padding: theme.spacing(8, 0, 6), }, heroButtons: { - marginTop: theme.spacing.unit * 4, + marginTop: theme.spacing(4), }, layout: { width: 'auto', - marginLeft: theme.spacing.unit * 3, - marginRight: theme.spacing.unit * 3, - [theme.breakpoints.up(1100 + theme.spacing.unit * 3 * 2)]: { + marginLeft: theme.spacing(3), + marginRight: theme.spacing(3), + [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: { width: 1100, marginLeft: 'auto', marginRight: 'auto', }, }, cardGrid: { - padding: `${theme.spacing.unit * 8}px 0`, + padding: theme.spacing(8, 0), }, card: { height: '100%', @@ -58,7 +58,7 @@ const styles = theme => ({ }, footer: { backgroundColor: theme.palette.background.paper, - padding: theme.spacing.unit * 6, + padding: theme.spacing(6), }, }); @@ -91,7 +91,7 @@ function Album(props) { entirely.
- +
{/* End hero unit */} - + {cards.map(card => ( diff --git a/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js b/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js index 1048d99cfda32e..c510b8303d62cd 100644 --- a/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js +++ b/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js @@ -22,9 +22,9 @@ import post3 from './blog-post.3.md'; const styles = theme => ({ layout: { width: 'auto', - marginLeft: theme.spacing.unit * 3, - marginRight: theme.spacing.unit * 3, - [theme.breakpoints.up(1100 + theme.spacing.unit * 3 * 2)]: { + marginLeft: theme.spacing(3), + marginRight: theme.spacing(3), + [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: { width: 1100, marginLeft: 'auto', marginRight: 'auto', @@ -42,16 +42,16 @@ const styles = theme => ({ mainFeaturedPost: { backgroundColor: theme.palette.grey[800], color: theme.palette.common.white, - marginBottom: theme.spacing.unit * 4, + marginBottom: theme.spacing(4), }, mainFeaturedPostContent: { - padding: `${theme.spacing.unit * 6}px`, + padding: theme.spacing(6), [theme.breakpoints.up('md')]: { paddingRight: 0, }, }, mainGrid: { - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, card: { display: 'flex', @@ -63,19 +63,19 @@ const styles = theme => ({ width: 160, }, markdown: { - padding: `${theme.spacing.unit * 3}px 0`, + padding: theme.spacing(3, 0), }, sidebarAboutBox: { - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), backgroundColor: theme.palette.grey[200], }, sidebarSection: { - marginTop: theme.spacing.unit * 3, + marginTop: theme.spacing(3), }, footer: { backgroundColor: theme.palette.background.paper, - marginTop: theme.spacing.unit * 8, - padding: `${theme.spacing.unit * 6}px 0`, + marginTop: theme.spacing(8), + padding: theme.spacing(6, 0), }, }); @@ -178,7 +178,7 @@ function Blog(props) { {/* End main featured post */} {/* Sub featured posts */} - + {featuredPosts.map(post => ( @@ -210,7 +210,7 @@ function Blog(props) { ))} {/* End sub featured posts */} - + {/* Main content */} diff --git a/docs/src/pages/getting-started/page-layout-examples/blog/Markdown.js b/docs/src/pages/getting-started/page-layout-examples/blog/Markdown.js index 5b5e418a72bdd6..b462055658c994 100644 --- a/docs/src/pages/getting-started/page-layout-examples/blog/Markdown.js +++ b/docs/src/pages/getting-started/page-layout-examples/blog/Markdown.js @@ -5,7 +5,7 @@ import Typography from '@material-ui/core/Typography'; const styles = theme => ({ listItem: { - marginTop: theme.spacing.unit, + marginTop: theme.spacing(1), }, }); diff --git a/docs/src/pages/getting-started/page-layout-examples/checkout/AddressForm.js b/docs/src/pages/getting-started/page-layout-examples/checkout/AddressForm.js index 970d96d1fa456c..2edde63e3785c2 100644 --- a/docs/src/pages/getting-started/page-layout-examples/checkout/AddressForm.js +++ b/docs/src/pages/getting-started/page-layout-examples/checkout/AddressForm.js @@ -11,7 +11,7 @@ function AddressForm() { Shipping address - + ({ }, layout: { width: 'auto', - marginLeft: theme.spacing.unit * 2, - marginRight: theme.spacing.unit * 2, - [theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]: { + marginLeft: theme.spacing(2), + marginRight: theme.spacing(2), + [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: { width: 600, marginLeft: 'auto', marginRight: 'auto', }, }, paper: { - marginTop: theme.spacing.unit * 3, - marginBottom: theme.spacing.unit * 3, - padding: theme.spacing.unit * 2, - [theme.breakpoints.up(600 + theme.spacing.unit * 3 * 2)]: { - marginTop: theme.spacing.unit * 6, - marginBottom: theme.spacing.unit * 6, - padding: theme.spacing.unit * 3, + marginTop: theme.spacing(3), + marginBottom: theme.spacing(3), + padding: theme.spacing(2), + [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: { + marginTop: theme.spacing(6), + marginBottom: theme.spacing(6), + padding: theme.spacing(3), }, }, stepper: { - padding: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 5}px`, + padding: theme.spacing(3, 0, 5), }, buttons: { display: 'flex', justifyContent: 'flex-end', }, button: { - marginTop: theme.spacing.unit * 3, - marginLeft: theme.spacing.unit, + marginTop: theme.spacing(3), + marginLeft: theme.spacing(1), }, }); diff --git a/docs/src/pages/getting-started/page-layout-examples/checkout/PaymentForm.js b/docs/src/pages/getting-started/page-layout-examples/checkout/PaymentForm.js index 2c2ba129df1fb9..7ef272b1ad48f4 100644 --- a/docs/src/pages/getting-started/page-layout-examples/checkout/PaymentForm.js +++ b/docs/src/pages/getting-started/page-layout-examples/checkout/PaymentForm.js @@ -11,7 +11,7 @@ function PaymentForm() { Payment method - + diff --git a/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js b/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js index a83fd1481b2230..bead26ab7529a2 100644 --- a/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js +++ b/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js @@ -24,13 +24,13 @@ const payments = [ const styles = theme => ({ listItem: { - padding: `${theme.spacing.unit}px 0`, + padding: theme.spacing(1, 0), }, total: { fontWeight: '700', }, title: { - marginTop: theme.spacing.unit * 2, + marginTop: theme.spacing(2), }, }); @@ -55,7 +55,7 @@ function Review(props) { - + Shipping diff --git a/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js b/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js index f10142df4dde78..4f029eb83a5c4c 100644 --- a/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js +++ b/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js @@ -74,15 +74,15 @@ const styles = theme => ({ easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), - width: theme.spacing.unit * 7, + width: theme.spacing(7), [theme.breakpoints.up('sm')]: { - width: theme.spacing.unit * 9, + width: theme.spacing(9), }, }, appBarSpacer: theme.mixins.toolbar, content: { flexGrow: 1, - padding: theme.spacing.unit * 3, + padding: theme.spacing(3), height: '100vh', overflow: 'auto', }, @@ -93,7 +93,7 @@ const styles = theme => ({ height: 320, }, h5: { - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), }, }); diff --git a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js index c4c2a409676b3d..f35207b154c3c7 100644 --- a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js +++ b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js @@ -28,9 +28,9 @@ const styles = theme => ({ }, layout: { width: 'auto', - marginLeft: theme.spacing.unit * 3, - marginRight: theme.spacing.unit * 3, - [theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: { + marginLeft: theme.spacing(3), + marginRight: theme.spacing(3), + [theme.breakpoints.up(900 + theme.spacing(3) * 2)]: { width: 900, marginLeft: 'auto', marginRight: 'auto', @@ -39,7 +39,7 @@ const styles = theme => ({ heroContent: { maxWidth: 600, margin: '0 auto', - padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`, + padding: theme.spacing(8, 0, 6), }, cardHeader: { backgroundColor: theme.palette.grey[200], @@ -48,17 +48,17 @@ const styles = theme => ({ display: 'flex', justifyContent: 'center', alignItems: 'baseline', - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), }, cardActions: { [theme.breakpoints.up('sm')]: { - paddingBottom: theme.spacing.unit * 2, + paddingBottom: theme.spacing(2), }, }, footer: { - marginTop: theme.spacing.unit * 8, + marginTop: theme.spacing(8), borderTop: `1px solid ${theme.palette.divider}`, - padding: `${theme.spacing.unit * 6}px 0`, + padding: theme.spacing(6, 0), }, }); @@ -146,7 +146,7 @@ function Pricing(props) {
{/* End hero unit */} - + {tiers.map(tier => ( // Enterprise card is full width at sm breakpoint @@ -186,7 +186,7 @@ function Pricing(props) { {/* Footer */}