Update theme.breakpoints.step type and default value to reflect run…

…time

docs/src/pages/customization/breakpoints/breakpoints.md

@@ -70,8 +70,9 @@ You define your project's breakpoints in the `theme.breakpoints` section of your
 <!-- Keep in sync with packages/mui-system/src/createTheme/createBreakpoints.d.ts -->
 
 - [`theme.breakpoints.values`](/customization/default-theme/?expand-path=$.breakpoints.values): Default to the [above values](#default-breakpoints). The keys are your screen names, and the values are the min-width where that breakpoint should start.
-- `theme.breakpoints.unit`: Default to `px`. The unit used for the breakpoint's values.
-- `theme.breakpoints.step`: Default to 5 (`0.05px`). The increment used to implement exclusive breakpoints.
+- `theme.breakpoints.unit`: Default to `'px'`. The unit used for the breakpoint's values.
+- `theme.breakpoints.step`: Default to `5`. The increment divided by 100 used to implement exclusive breakpoints.
+  For example, `{ step: 5 }` means that `down(500)` will result in `'(max-width: 499.95px)'`.
 
 If you change the default breakpoints's values, you need to provide them all:
 

packages/mui-system/src/createTheme/createBreakpoints.d.ts

@@ -36,31 +36,32 @@ export interface Breakpoints {
   up: (key: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @returns
+   * @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
    * @see [API documentation](https://mui.com/customization/breakpoints/#theme-breakpoints-down-key-media-query)
    */
   down: (key: Breakpoint | number) => string;
   /**
    * @param start - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @returns
+   * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
    * @see [API documentation](https://mui.com/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
    */
   between: (start: Breakpoint | number, end: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @returns
+   * @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
    * @see [API documentation](https://mui.com/customization/breakpoints/#theme-breakpoints-only-key-media-query)
    */
   only: (key: Breakpoint) => string;
 }
 
 export interface BreakpointsOptions extends Partial<Breakpoints> {
   /**
-   * The increment used to implement exclusive breakpoints.
-   * @default '0.05px'
+   * The increment divided by 100 used to implement exclusive breakpoints.
+   * For example, `step: 5` means that `down(500)` will result in `'(max-width: 499.95px)'`.
+   * @default 5
    */
-  step?: string | undefined;
+  step?: number | undefined;
   /**
    * The unit used for the breakpoint's values.
    * @default 'px'