[docs] Use () when referencing functions (#44184)

mui · Oct 22, 2024 · 5df4411 · 5df4411
1 parent 506e17e
commit 5df4411
Show file tree

Hide file tree

Showing 20 changed files with 36 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -358,7 +358,7 @@ A big thanks to the 11 contributors who made this release possible.
 
 ### `@mui/[email protected]`
 
-- Fix `createTheme` with just color schemes (#43518) @siriwatknp
+- Fix `createTheme()` with just color schemes (#43518) @siriwatknp
 - [Menu,Popover] Fix Backdrop props descriptions (#43503) @Michael-Hutchinson
 - [MenuList] Do not react to an event with modifier key pressed (#43505) @MateuszGroth
 
@@ -1100,7 +1100,7 @@ A big thanks to the 18 contributors who made this release possible.
 
 ### Docs
 
-- Add `theme.applyStyles` and migrate docs (#42498) @siriwatknp
+- Add `theme.applyStyles()` and migrate docs (#42498) @siriwatknp
 - Fix dashboard template console error (#42594) @oliviertassinari
 - Migrate system props to `sx` prop (#42475) @siriwatknp
 - [material-ui]Fix duplicated sentence (#42521) @alexfauquette

diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md
@@ -918,7 +918,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 
 - [zero-runtime] Use lodash instead of its subpackages (#40868) @michaldudak
 - Add `applyStyles()` to theme (#40667) @siriwatknp
-- [zero] Use `theme.applyStyles` in the demo app (#40787) @siriwatknp
+- [zero] Use `theme.applyStyles()` in the demo app (#40787) @siriwatknp
 - [zero] Add `useThemeProps` processor (#40648) @siriwatknp
 
 ### `@mui/[email protected]`
@@ -3301,7 +3301,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
 - [docs] Add summary and improve `test_static` CI doc in CONTRIBUTING readme file (#36711) @kriskw1999
 - [docs] Update theme customization TypeScript (#35551) @siriwatknp
 - [docs] Add Joy Frames X web blocks template (#37203) @siriwatknp
-- [docs] Change Base UI `alpha` to `beta` in README (#37228) @ZeeshanTamboli
+- [docs] Change Base UI `alpha()` to `beta()` in README (#37228) @ZeeshanTamboli
 - [docs] Improve Base UI overview page (#37227) @mnajdova
 - [docs] Update Joy + Material guide (#36911) @cherniavskii
 
@@ -5909,7 +5909,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
 - [docs] Fix en-US format in the Skeleton demo (#33699) @husseinsaad98
 - [docs] Update module reference for `usePagination` (#33675) @fullstackzach
 - [docs] Fix code examples in `styled` API vs `sx` prop docs (#33665) @ZeeshanTamboli
-- [docs][system] Throw an informative error when `theme.vars` is used in `createTheme` and mention this in the theming docs (#33619) @hbjORbj
+- [docs][system] Throw an informative error when `theme.vars` is used in `createTheme()` and mention this in the theming docs (#33619) @hbjORbj
 
 ### Core
 
@@ -10448,7 +10448,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
    }
   ```
 
-- [theme] Rename `createMuiTheme` to `createTheme` (#25992) @m4theushw
+- [theme] Rename `createMuiTheme()` to `createTheme()` (#25992) @m4theushw
 
   Developers only need one theme in their application. A prefix would suggest a second theme is needed. It's not the case. `createMuiTheme` will be removed in v6.
 
@@ -13019,7 +13019,7 @@ Here are some highlights ✨:
 ### `@material-ui/[email protected]`
 
 - [TreeView] Fix bundle size link and refactor array spreads (#22992) @joshwooding
-- [TreeView] Fix `alpha` color utility instead of deprecated `fade` (#22978) @joshwooding
+- [TreeView] Fix `alpha()` color utility instead of deprecated `fade()` (#22978) @joshwooding
 - [core] Ship modern bundle (#22814) @eps1lon
 
 ### `@material-ui/[email protected]`
@@ -14927,7 +14927,7 @@ You can expect similar releases like this one in the coming months.
 
 #### Deprecations
 
-- [theme] Deprecate `fade` color utility in favor of `alpha` (#22837) @mnajdova
+- [theme] Deprecate `fade()` color utility in favor of `alpha()` (#22837) @mnajdova
 - [theme] Deprecate theme.mixins.gutters (#22245) @joshwooding
 - [Avatar] Add circular variant (#22090) @eps1lon
 - [Badge] Add overlap circular and rectangular (#22076) @eps1lon

diff --git a/docs/data/material/customization/css-theme-variables/configuration.md b/docs/data/material/customization/css-theme-variables/configuration.md
@@ -128,7 +128,7 @@ For SSR (server-side rendering) applications, Material UI can not detected user
 
 To prevent the issue, you need to ensure that there is no usage of `theme.palette.mode === 'dark'` in your code base.
 
-If you have such a condition, replace it with the [`theme.applyStyles`](#appling-dark-styles) function:
+If you have such a condition, replace it with the [`theme.applyStyles()`](#appling-dark-styles) function:
 
 ```diff
  import Card from '@mui/material/Card';
@@ -272,7 +272,7 @@ In the example below, all the components inside the `div` will always be dark:
 
 ## Disabling CSS color scheme
 
-By default, `createTheme` attaches a [CSS `color-scheme` property](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) based on the palette mode.
+By default, `createTheme()` attaches a [CSS `color-scheme` property](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) based on the palette mode.
 You can disable this by setting `disableCssColorScheme` to `true`:
 
 ```js

diff --git a/docs/data/material/customization/css-theme-variables/usage.md b/docs/data/material/customization/css-theme-variables/usage.md
@@ -48,7 +48,7 @@ If you want to be able to manually toggle modes, see the guide to [toggling dark
 
 ## Applying dark styles
 
-To customize styles for dark mode, use `theme.applyStyles` function.
+To customize styles for dark mode, use `theme.applyStyles()` function.
 This utility function will return the right selector.
 
 The example below shows how to customize the Card component for dark mode:

diff --git a/docs/data/material/customization/dark-mode/dark-mode.md b/docs/data/material/customization/dark-mode/dark-mode.md
@@ -4,7 +4,7 @@
 
 ## Dark mode only
 
-You can make your application use the dark theme as the default—regardless of the user's preference—by adding `mode: 'dark'` to the `createTheme` helper:
+You can make your application use the dark theme as the default—regardless of the user's preference—by adding `mode: 'dark'` to the `createTheme()` helper:
 
 ```js
 import { ThemeProvider, createTheme } from '@mui/material/styles';
@@ -26,7 +26,7 @@ export default function App() {
 }
 ```
 
-Adding `mode: 'dark'` to the `createTheme` helper modifies several palette values, as shown in the following demo:
+Adding `mode: 'dark'` to the `createTheme()` helper modifies several palette values, as shown in the following demo:
 
 {{"demo": "DarkTheme.js", "bg": "inline", "hideToolbar": true}}
 
@@ -156,7 +156,7 @@ If you are using the `InitColorSchemeScript` component to [prevent SSR flicker](
 
 ## Styling in dark mode
 
-Use the `theme.applyStyles` utility to apply styles for a specific mode.
+Use the `theme.applyStyles()` utility to apply styles for a specific mode.
 
 We recommend using this function over checking `theme.palette.mode` to switch between styles as it has more benefits:
 

diff --git a/docs/data/material/customization/default-theme/default-theme.md b/docs/data/material/customization/default-theme/default-theme.md
@@ -3,7 +3,7 @@
 <p class="description">This tree view allows you to explore how the theme object looks like with the default values.</p>
 
 If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createTheme.ts`](https://github.com/mui/material-ui/blob/-/packages/mui-material/src/styles/createTheme.ts),
-and the related imports which `createTheme` uses.
+and the related imports which `createTheme()` uses.
 
 You can play with the documentation theme object in your browser console,
 as the `theme` variable is exposed on all the documentation pages.

diff --git a/docs/data/material/customization/palette/CustomColor.tsx b/docs/data/material/customization/palette/CustomColor.tsx
@@ -18,7 +18,7 @@ declare module '@mui/material/styles' {
     neutral: Palette['primary'];
   }
 
-  // allow configuration using `createTheme`
+  // allow configuration using `createTheme()`
   interface PaletteOptions {
     neutral?: PaletteOptions['primary'];
   }

diff --git a/docs/data/material/customization/palette/palette.md b/docs/data/material/customization/palette/palette.md
@@ -150,7 +150,7 @@ const theme = createTheme({
 {{"demo": "ManuallyProvideCustomColor.js", "defaultCodeOpen": false}}
 
 If you need to manipulate colors, `@mui/material/styles` provides [a set of utilities](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/index.d.ts#L52-L67) to help with this.
-The following example uses the `alpha` and `getContrastRatio` utilities to define tokens using opacity:
+The following example uses the `alpha()` and `getContrastRatio()` utilities to define tokens using opacity:
 
 ```jsx
 import { createTheme, alpha, getContrastRatio } from '@mui/material/styles';

diff --git a/docs/data/material/customization/right-to-left/right-to-left.md b/docs/data/material/customization/right-to-left/right-to-left.md
@@ -48,7 +48,7 @@ You must apply the `dir` attribute directly to these components if it's not glob
 
 ### 2. Set the theme direction
 
-Use the `createTheme` API to set the theme direction to `'rtl'`:
+Use the `createTheme()` API to set the theme direction to `'rtl'`:
 
 ```js
 import { createTheme } from '@mui/material/styles';

diff --git a/docs/data/material/customization/theming/CustomStyles.tsx b/docs/data/material/customization/theming/CustomStyles.tsx
@@ -9,7 +9,7 @@ declare module '@mui/material/styles' {
       danger: string;
     };
   }
-  // allow configuration using `createTheme`
+  // allow configuration using `createTheme()`
   interface ThemeOptions {
     status?: {
       danger?: string;

diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md
@@ -67,7 +67,7 @@ declare module '@mui/material/styles' {
       danger: string;
     };
   }
-  // allow configuration using `createTheme`
+  // allow configuration using `createTheme()`
   interface ThemeOptions {
     status?: {
       danger?: string;
@@ -159,8 +159,8 @@ Generate a theme base on the options received. Then, pass it as a prop to [`Them
 2. `...args` (_object[]_): Deep merge the arguments with the about to be returned theme.
 
 :::warning
-Only the first argument (`options`) is processed by the `createTheme` function.
-If you want to actually merge two themes' options and create a new one based on them, you may want to deep merge the two options and provide them as a first argument to the `createTheme` function.
+Only the first argument (`options`) is processed by the `createTheme()` function.
+If you want to actually merge two themes' options and create a new one based on them, you may want to deep merge the two options and provide them as a first argument to the `createTheme()` function.
 :::
 
 ```js

diff --git a/docs/data/material/customization/typography/typography.md b/docs/data/material/customization/typography/typography.md
@@ -285,7 +285,7 @@ declare module '@mui/material/styles' {
     poster: React.CSSProperties;
   }
 
-  // allow configuration using `createTheme`
+  // allow configuration using `createTheme()`
   interface TypographyVariantsOptions {
     poster?: React.CSSProperties;
   }

diff --git a/docs/data/material/migration/migration-v4/v5-style-changes.md b/docs/data/material/migration/migration-v4/v5-style-changes.md
@@ -308,7 +308,7 @@ For a smoother transition, the `adaptV4Theme` helper allows you to iteratively u
 ```
 
 :::warning
-This adapter only handles the input arguments of `createTheme`.
+This adapter only handles the input arguments of `createTheme()`.
 If you modify the shape of the theme after its creation, you need to migrate the structure manually.
 :::
 
@@ -511,7 +511,7 @@ Nested imports of more than one level are private. For example, you can no longe
 
 ### ✅ Rename fade to alpha
 
-`fade` was renamed to `alpha` to better describe its functionality.
+`fade()` was renamed to `alpha()` to better describe its functionality.
 
 The previous name caused confusion when the input color already had an alpha value. The helper overrides the alpha value of the color.
 
@@ -548,7 +548,7 @@ To generate custom class names without using `@mui/styles`, check out [ClassName
 
 ### ✅ Rename createMuiTheme
 
-The function `createMuiTheme` was renamed to `createTheme` to make it more intuitive to use with `ThemeProvider`.
+The function `createMuiTheme` was renamed to `createTheme()` to make it more intuitive to use with `ThemeProvider`.
 
 ```diff
 -import { createMuiTheme } from '@mui/material/styles';

diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
@@ -450,7 +450,7 @@ See [CSS theme variables](/material-ui/customization/css-theme-variables/overvie
 
 ### Color mode theme utility
 
-Material UI v6 introduces a new utility for adding styles to specific color modes called `theme.applyStyles`, designed to replace `theme.palette.mode` when applying light or dark styles:
+Material UI v6 introduces a new utility for adding styles to specific color modes called `theme.applyStyles()`, designed to replace `theme.palette.mode` when applying light or dark styles:
 
 ```diff
  const MyComponent = styled('button')(({ theme }) => ({
@@ -464,7 +464,7 @@ Material UI v6 introduces a new utility for adding styles to specific color mod
  }))
 ```
 
-Use these codemods to migrate your project to `theme.applyStyles`:
+Use these codemods to migrate your project to `theme.applyStyles()`:
 
 ```bash
 npx @mui/codemod@latest v6.0.0/styled <path/to/folder-or-file>

diff --git a/docs/pages/blog/material-ui-v6-is-out.md b/docs/pages/blog/material-ui-v6-is-out.md
@@ -243,7 +243,7 @@ It also works with the `sx` prop:
 
 ### New method of applying styles
 
-The new API `theme.applyStyles` has been added for creating specific mode styles.
+The new API `theme.applyStyles()` has been added for creating specific mode styles.
 It's designed to replace the `theme.palette.mode === 'dark'` condition to fix the SSR flickering issue when combined with the CSS theme variables feature.
 
 <codeblock>

diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
@@ -2136,7 +2136,7 @@ The list includes these transformers
 
 #### `adapter-v4`
 
-Imports and inserts `adaptV4Theme` into `createTheme` (or `createMuiTheme`)
+Imports and inserts `adaptV4Theme` into `createTheme()` (or `createMuiTheme`)
 
 ```diff
 +import { adaptV4Theme } from '@material-ui/core/styles';
@@ -2422,7 +2422,7 @@ npx @mui/codemod@latest v5.0.0/core-styles-import <path>
 
 #### `create-theme`
 
-Renames the function `createMuiTheme` to `createTheme`
+Renames the function `createMuiTheme()` to `createTheme()`
 
 ```diff
 -import { createMuiTheme } from '@material-ui/core/styles';
@@ -2503,7 +2503,7 @@ You can find more details about this breaking change in [the migration guide](ht
 
 #### `fade-rename-alpha`
 
-Renames the `fade` style utility import and calls to `alpha`.
+Renames the `fade` style utility import and calls to `alpha()`.
 
 ```diff
 -import { fade, lighten } from '@material-ui/core/styles';

diff --git a/packages/mui-material/src/styles/ThemeProviderWithVars.tsx b/packages/mui-material/src/styles/ThemeProviderWithVars.tsx
@@ -83,7 +83,7 @@ const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScript = (par
  * @deprecated
  * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
  *
- * You should use `ThemeProvider` and `createTheme` instead:
+ * You should use `ThemeProvider` and `createTheme()` instead:
  *
  * ```diff
  * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';

diff --git a/packages/mui-material/src/styles/stringifyTheme.ts b/packages/mui-material/src/styles/stringifyTheme.ts
@@ -13,7 +13,7 @@ function isSerializable(val: any) {
 }
 
 /**
- * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ * `baseTheme` usually comes from `createTheme()` or `extendTheme()`.
  *
  * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
  * For example, in a Next.js project:

diff --git a/packages/mui-material/test/typescript/moduleAugmentation/responsiveFontSizes.spec.ts b/packages/mui-material/test/typescript/moduleAugmentation/responsiveFontSizes.spec.ts
@@ -5,7 +5,7 @@ declare module '@mui/material/styles' {
     poster: React.CSSProperties;
   }
 
-  // allow configuration using `createTheme`
+  // allow configuration using `createTheme()`
   interface TypographyVariantsOptions {
     poster?: React.CSSProperties;
   }

diff --git a/packages/mui-material/test/typescript/moduleAugmentation/typographyVariants.spec.tsx b/packages/mui-material/test/typescript/moduleAugmentation/typographyVariants.spec.tsx
@@ -8,7 +8,7 @@ declare module '@mui/material/styles' {
     poster: React.CSSProperties;
   }
 
-  // allow configuration using `createTheme`
+  // allow configuration using `createTheme()`
   interface TypographyVariantsOptions {
     poster?: React.CSSProperties;
   }