@mui/system 5.2.6 → 5.2.8

package/CHANGELOG.md

@@ -1,4 +1,83 @@
-### [Versions](https://mui.com/versions/)
+# [Versions](https://mui.com/versions/)
+
+## 5.2.8
+
+<!-- generated comparing v5.2.7..master -->
+
+_Jan 10, 2022_
+
+A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- A meaningful number of 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.2.8`
+
+- &#8203;<!-- 05 -->[TextField][inputlabel] Remove `pointer-events: none` property (#30493) @hbjORbj
+- &#8203;<!-- 02 -->[Slider] Add `input` slot to components and componentsProps (#30362) @alexandre-lelain
+
+### `@mui/joy@5.0.0-alpha.10`
+
+- &#8203;<!-- 04 -->[Joy] Add `Typography` component (#30489) @siriwatknp
+- &#8203;<!-- 03 -->[Joy] Add functional `Switch` component (#30487) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 18 -->[docs] Update markdown parser to remove backticks from description (#30495) @aefox
+- &#8203;<!-- 17 -->[docs] Fix the crash when applying custom colors (#30563) @siriwatknp
+- &#8203;<!-- 16 -->[docs] Location change of Sebastian (#30528) @eps1lon
+- &#8203;<!-- 15 -->[docs] Lint markdown in the CI (#30395) @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Fix `componentsProps` API docs and PropTypes (#30502) @ZeeshanTamboli
+- &#8203;<!-- 13 -->[docs] Codemod doc for overriding styles using tss (#30499) @garronej
+- &#8203;<!-- 12 -->[docs] fix edge case when replacing data-grid url for migration (#30505) @siriwatknp
+- &#8203;<!-- 11 -->[docs] fix replace url for migration (#30503) @siriwatknp
+- &#8203;<!-- 10 -->[docs] Prepare scripts for migrating to new structure (#30386) @siriwatknp
+- &#8203;<!-- 09 -->[docs] Adjust RTL Guide demos to fully support RTL (#30387) @noam-honig
+- &#8203;<!-- 08 -->[docs] Move @eps1lon to community (#30473) @oliviertassinari
+- &#8203;<!-- 07 -->[docs] Fix typo and spelling in the-sx-prop.md (#30482) @aefox
+- &#8203;<!-- 06 -->[docs] More general docs polishing (#30371) @danilo-leal
+- &#8203;<!-- 01 -->[website] Add José on the /about page (#30492) @danilo-leal
+
+All contributors of this release in alphabetical order: @aefox, @alexandre-lelain, @danilo-leal, @eps1lon, @garronej, @hbjORbj, @noam-honig, @oliviertassinari, @siriwatknp, @ZeeshanTamboli
+
+## 5.2.7
+
+<!-- generated comparing v5.2.6..master -->
+
+_Jan 3, 2022_
+
+A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📓 Improvements on the Vietnamese (vi-VN) and Finnish (fi-FI) locales (#30426, #30442) @hckhanh @Certificate
+- And more 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.2.7`
+
+- &#8203;<!-- 14 -->[Autocomplete] Fix calling onChange for duplicate values (#30374) @alisasanib
+- &#8203;<!-- 13 -->[Avatar] Fix TypeScript error on imgProps (#30255) @ahmad-reza619
+- &#8203;<!-- 12 -->[Badge] Fix `classes` prop TypeScript type (#30427) @ZeeshanTamboli
+- &#8203;<!-- 03 -->[SvgIcon] Allow viewBox to inherit from Component through inheritViewBox prop (#29954) @alex-dikusar
+- &#8203;<!-- 04 -->[SvgIcon] Correct API docs and code style (#30470) @michaldudak
+
+### Docs
+
+- &#8203;<!-- 11 -->[blog] 2021 (#30425) @oliviertassinari
+- &#8203;<!-- 15 -->[docs] Fix typo on the Grid docs page (#30446) @abhi45
+- &#8203;<!-- 07 -->[docs] Fix `useMediaQuery` SSR example to v5 theme API (#30454) @ValentinH
+- &#8203;<!-- 11 -->[docs] Improve the migration guide and add examples for transforming to `tss-react` (#30388) @mnajdova
+- &#8203;<!-- 09 -->[docs] Make the reference to the select clearer (#30460) @boazrymland
+- &#8203;<!-- 08 -->[docs] Sync translations with Crowdin (#30385) @l10nbot
+- &#8203;<!-- 06 -->[example] Avoid double rendering in the Remix example (#30366) @mnajdova
+- &#8203;<!-- 05 -->[i18n] improve viVN locale (#30426) @hckhanh
+- &#8203;<!-- 04 -->[l10n] Improve fiFI locale (#30442) @Certificate
+- &#8203;<!-- 02 -->[website] Add new batch of open roles (#30282) @oliviertassinari
+- &#8203;<!-- 01 -->[website] Refactor page context with next router (#30020) @siriwatknp
+
+### Core
+
+- &#8203;<!-- 13 -->[core] Automatically close issues that are incomplete and inactive (#30459) @oliviertassinari
+- &#8203;<!-- 10 -->[core] Remove contrib tweet (#30455) @oliviertassinari
+
+All contributors of this release in alphabetical order: @abhi45, @ahmad-reza619, @alex-dikusar, @alisasanib, @boazrymland, @Certificate, @hckhanh, @l10nbot, @michaldudak, @mnajdova, @oliviertassinari, @siriwatknp, @ValentinH, @ZeeshanTamboli
 
 ## 5.2.6
 
@@ -1185,7 +1264,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
   replace `@material-ui/*` prefix with `@mui/*`:
 
-  ```
+  ```sh
   @material-ui/system -> @mui/system
   @material-ui/styles -> @mui/styles
   @material-ui/lab -> @mui/lab
@@ -1198,7 +1277,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
   except these 3 packages that are renamed.
 
-  ```
+  ```sh
   @material-ui/core => @mui/material        // represents Material Design components.
   @material-ui/icons => @mui/icons-material // represents Material Design icons.
   @material-ui/unstyled => @mui/base        // fully functional components with minimum styles.
@@ -2571,6 +2650,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som
   ```
 
 - &#8203;<!-- 63 -->[Autocomplete] Rename getOptionSelected to isOptionEqualToValue (#26173) @m4theushw
+
   ```diff
   <Autocomplete
   -  getOptionSelected={(option, value) => option.title === value.title}
@@ -4144,7 +4224,7 @@ All contributors of this release in alphabetical order: @artola, @CyanoFresh, @d
 
 ## 5.0.0-alpha.23
 
-###### _Jan 14, 2021_
+_Jan 14, 2021_
 
 A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4259,7 +4339,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.22
 
-###### _Jan 4, 2021_
+_Jan 4, 2021_
 
 A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4311,7 +4391,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.21
 
-###### _Dec 30, 2020_
+_Dec 30, 2020_
 
 A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4384,7 +4464,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.20
 
-###### _Dec 21, 2020_
+_Dec 21, 2020_
 
 A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4462,7 +4542,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.19
 
-###### _Dec 13, 2020_
+_Dec 13, 2020_
 
 A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4590,7 +4670,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.18
 
-###### _Dec 3, 2020_
+_Dec 3, 2020_
 
 A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4682,7 +4762,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.17
 
-###### _Nov 23, 2020_
+_Nov 23, 2020_
 
 A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4849,7 +4929,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.16
 
-###### _Nov 14, 2020_
+_Nov 14, 2020_
 
 A big thanks to the 34 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4953,7 +5033,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.15
 
-###### _Nov 4, 2020_
+_Nov 4, 2020_
 
 A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨:
 
@@ -5065,7 +5145,7 @@ A big thanks to the 20 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.14
 
-###### _Oct 23, 2020_
+_Oct 23, 2020_
 
 A big thanks to the 23 contributors who made this release possible.
 Here are some highlights ✨:
@@ -5116,12 +5196,14 @@ Here are some highlights ✨:
   You can read [their migration guide](https://popper.js.org/docs/v2/migration-guide/) or the following summary:
 
   - The CSS prefixes have changed:
+
     ```diff
     popper: {
       zIndex: 1,
     - '&[x-placement*="bottom"] $arrow': {
     + '&[data-popper-placement*="bottom"] $arrow': {
     ```
+
   - Method names have changed.
 
     ```diff
@@ -5236,7 +5318,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.13
 
-###### _Oct 17, 2020_
+_Oct 17, 2020_
 
 A big thanks to the 25 contributors who made this release possible.
 Here are some highlights ✨:
@@ -5362,7 +5444,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.12
 
-###### _Oct 11, 2020_
+_Oct 11, 2020_
 
 A big thanks to the 45 contributors who made this release possible.
 Here are some highlights ✨:
@@ -5586,7 +5668,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.11
 
-###### _Sep 26, 2020_
+_Sep 26, 2020_
 
 A big thanks to the 29 contributors who made this release possible.
 Here are some highlights ✨:
@@ -5820,7 +5902,7 @@ More documentation are coming.
 
 ## 5.0.0-alpha.10
 
-###### _Sep 15, 2020_
+_Sep 15, 2020_
 
 A big thanks to the 16 contributors who made this release possible.
 Here are some highlights ✨:
@@ -5885,13 +5967,13 @@ Here are some highlights ✨:
 
   Before:
 
-  ```
+  ```sh
   theme.spacing(2) => 16
   ```
 
   After:
 
-  ```
+  ```sh
   theme.spacing(2) => '16px'
   ```
 
@@ -5950,7 +6032,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.9
 
-###### _Sep 6, 2020_
+_Sep 6, 2020_
 
 A big thanks to the 14 contributors who made this release possible.
 Here are some highlights ✨:
@@ -6003,7 +6085,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.8
 
-###### _Aug 31, 2020_
+_Aug 31, 2020_
 
 A big thanks to the 19 contributors who made this release possible.
 Here are some highlights ✨:
@@ -6179,7 +6261,7 @@ const theme = createMuiTheme({
 
 ## 5.0.0-alpha.7
 
-###### _Aug 22, 2020_
+_Aug 22, 2020_
 
 A big thanks to the 22 contributors who made this release possible.
 Here are some highlights ✨:
@@ -6309,7 +6391,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.6
 
-###### _Aug 13, 2020_
+_Aug 13, 2020_
 
 A big thanks to the 26 contributors who made this release possible.
 Here are some highlights ✨:
@@ -6352,7 +6434,7 @@ Here are some highlights ✨:
 
 ### `@material-ui/core@v5.0.0-alpha.6`
 
-### Breaking changes
+#### Breaking changes
 
 - [Avatar] Rename variant circle -> circular for consistency (#22015) @kodai3
   Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns:
@@ -6511,7 +6593,7 @@ Here are some highlights ✨:
   +},
   ```
 
-### Changes
+#### Changes
 
 - [Avatar] Custom variant (#22139) @mnajdova
 - [Badge] Add missing class key (#22095) @kodai3
@@ -6531,7 +6613,7 @@ Here are some highlights ✨:
 
 ### `@material-ui/lab@v5.0.0-alpha.6`
 
-### Breaking changes
+#### Breaking changes
 
 - [Skeleton] Rename variant circle -> circular and rect -> rectangular for consistency (#22053) @kodai3
   Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns:
@@ -6543,7 +6625,7 @@ Here are some highlights ✨:
   +<Skeleton variant="rectangular">
   ```
 
-### Changes
+#### Changes
 
 - [Autocomplete] Add support for "{label: string}" data type as a default for "options" (#21992) @DanailH
 - [TreeView] Add disabled prop (#20133) @netochaves
@@ -6595,7 +6677,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.5
 
-###### _July 28, 2020_
+_July 28, 2020_
 
 A big thanks to the 18 contributors who made this release possible.
 
@@ -6666,7 +6748,7 @@ A big thanks to the 18 contributors who made this release possible.
 
 ## 5.0.0-alpha.4
 
-###### _July 19, 2020_
+_July 19, 2020_
 
 A big thanks to the 11 contributors who made this release possible.
 
@@ -6708,7 +6790,7 @@ A big thanks to the 11 contributors who made this release possible.
 
 ## 5.0.0-alpha.3
 
-###### _July 12, 2020_
+_July 12, 2020_
 
 A big thanks to the 14 contributors who made this release possible.
 
@@ -6757,7 +6839,7 @@ A big thanks to the 14 contributors who made this release possible.
 
 ## 5.0.0-alpha.2
 
-###### _July 4, 2020_
+_July 4, 2020_
 
 A big thanks to the 16 contributors who made this release possible.
 
@@ -6819,7 +6901,7 @@ A big thanks to the 16 contributors who made this release possible.
 
 ## 5.0.0-alpha.1
 
-###### _June 27, 2020_
+_June 27, 2020_
 
 A big thanks to the 33 contributors who made this release possible. Here are some highlights ✨:
 
@@ -6935,6 +7017,7 @@ A big thanks to the 33 contributors who made this release possible. Here are som
   ```
 
 - [Accordion] typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
+
   ```diff
   -<Accordion onChange={(event: React.ChangeEvent<{}>, expanded: boolean) => {}} />
   +<Accordion onChange={(event: React.SyntheticEvent, expanded: boolean) => {}} />

package/cssVars/createCssVarsProvider.js

@@ -32,7 +32,7 @@ var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorS
 
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 
-var _createGetThemeVar = _interopRequireDefault(require("./createGetThemeVar"));
+var _createGetCssVar = _interopRequireDefault(require("./createGetCssVar"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -154,7 +154,7 @@ function createCssVarsProvider(options) {
       vars: rootVars,
       spacing: themeProp.spacing ? (0, _createSpacing.default)(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? (0, _createBreakpoints.default)(themeProp.breakpoints) : systemBreakpoints,
-      getThemeVar: (0, _createGetThemeVar.default)(prefix)
+      getCssVar: (0, _createGetCssVar.default)(prefix)
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {

package/cssVars/createGetCssVar.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;

package/cssVars/createGetCssVar.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createGetCssVar;
+
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+function createGetCssVar(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+  const getCssVar = (field, ...vars) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  };
+
+  return getCssVar;
+}

package/esm/cssVars/createCssVarsProvider.js

@@ -14,7 +14,7 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
-import createGetThemeVar from './createGetThemeVar';
+import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -128,7 +128,7 @@ export default function createCssVarsProvider(options) {
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
-      getThemeVar: createGetThemeVar(prefix)
+      getCssVar: createGetCssVar(prefix)
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {

package/esm/cssVars/createGetCssVar.js

@@ -0,0 +1,20 @@
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+  const getCssVar = (field, ...vars) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  };
+
+  return getCssVar;
+}

package/esm/index.js

@@ -39,4 +39,4 @@ export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
-export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';

package/index.d.ts

@@ -161,5 +161,5 @@ export { default as ThemeProvider } from './ThemeProvider';
 export * from './ThemeProvider';
 
 export { default as unstable_createCssVarsProvider } from './cssVars';
-export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
 export * from './cssVars';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.6
+/** @license MUI v5.2.8
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -50,7 +50,7 @@ var _exportNames = {
   useThemeWithoutDefault: true,
   ThemeProvider: true,
   unstable_createCssVarsProvider: true,
-  unstable_createGetThemeVar: true
+  unstable_createGetCssVar: true
 };
 Object.defineProperty(exports, "Box", {
   enumerable: true,
@@ -244,10 +244,10 @@ Object.defineProperty(exports, "unstable_createCssVarsProvider", {
     return _createCssVarsProvider.default;
   }
 });
-Object.defineProperty(exports, "unstable_createGetThemeVar", {
+Object.defineProperty(exports, "unstable_createGetCssVar", {
   enumerable: true,
   get: function () {
-    return _createGetThemeVar.default;
+    return _createGetCssVar.default;
   }
 });
 Object.defineProperty(exports, "unstable_extendSxProp", {
@@ -475,7 +475,7 @@ var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 
 var _createCssVarsProvider = _interopRequireDefault(require("./cssVars/createCssVarsProvider"));
 
-var _createGetThemeVar = _interopRequireDefault(require("./cssVars/createGetThemeVar"));
+var _createGetCssVar = _interopRequireDefault(require("./cssVars/createGetCssVar"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

package/legacy/cssVars/createCssVarsProvider.js

@@ -13,7 +13,7 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
-import createGetThemeVar from './createGetThemeVar';
+import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -134,7 +134,7 @@ export default function createCssVarsProvider(options) {
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
-      getThemeVar: createGetThemeVar(prefix)
+      getCssVar: createGetCssVar(prefix)
     });
     var styleSheet = {};
     Object.entries(colorSchemes).forEach(function (_ref2) {

package/legacy/cssVars/{createGetThemeVar.js → createGetCssVar.js}

@@ -1,5 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-export default function createGetThemeVar() {
+
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar() {
   var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
 
   function appendVar() {
@@ -12,9 +17,10 @@ export default function createGetThemeVar() {
     }
 
     return ", var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(vars[0]).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
-  }
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
 
-  var getThemeVar = function getThemeVar(field) {
+  var getCssVar = function getCssVar(field) {
     for (var _len2 = arguments.length, vars = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       vars[_key2 - 1] = arguments[_key2];
     }
@@ -22,5 +28,5 @@ export default function createGetThemeVar() {
     return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, vars), ")");
   };
 
-  return getThemeVar;
+  return getCssVar;
 }

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.6
+/** @license MUI v5.2.8
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -44,4 +44,4 @@ export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
-export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';

package/modern/cssVars/createCssVarsProvider.js

@@ -14,7 +14,7 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
-import createGetThemeVar from './createGetThemeVar';
+import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -126,7 +126,7 @@ export default function createCssVarsProvider(options) {
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
-      getThemeVar: createGetThemeVar(prefix)
+      getCssVar: createGetCssVar(prefix)
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {

package/modern/cssVars/createGetCssVar.js

@@ -0,0 +1,20 @@
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+  const getCssVar = (field, ...vars) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  };
+
+  return getCssVar;
+}

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.6
+/** @license MUI v5.2.8
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -44,4 +44,4 @@ export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
-export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.2.6",
+  "version": "5.2.8",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -49,6 +49,7 @@ export type SystemStyleObject<Theme extends object = {}> =
   | SystemCssProperties<Theme>
   | CSSPseudoSelectorProps<Theme>
   | CSSSelectorObject<Theme>
+  | { [cssVariable: string]: string | number }
   | null;
 
 /**

package/cssVars/createGetThemeVar.d.ts

@@ -1 +0,0 @@
-export default function createGetThemeVar<T extends string = string>(prefix?: string): (field: T, ...vars: T[]) => string;

package/cssVars/createGetThemeVar.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createGetThemeVar;
-
-function createGetThemeVar(prefix = '') {
-  function appendVar(...vars) {
-    if (!vars.length) {
-      return '';
-    }
-
-    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
-  }
-
-  const getThemeVar = (field, ...vars) => {
-    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
-  };
-
-  return getThemeVar;
-}

package/esm/cssVars/createGetThemeVar.js

@@ -1,15 +0,0 @@
-export default function createGetThemeVar(prefix = '') {
-  function appendVar(...vars) {
-    if (!vars.length) {
-      return '';
-    }
-
-    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
-  }
-
-  const getThemeVar = (field, ...vars) => {
-    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
-  };
-
-  return getThemeVar;
-}

package/modern/cssVars/createGetThemeVar.js

@@ -1,15 +0,0 @@
-export default function createGetThemeVar(prefix = '') {
-  function appendVar(...vars) {
-    if (!vars.length) {
-      return '';
-    }
-
-    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
-  }
-
-  const getThemeVar = (field, ...vars) => {
-    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
-  };
-
-  return getThemeVar;
-}