@mui/system 6.0.0-alpha.3 → 6.0.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.4
+
+<!-- generated comparing v6.0.0-alpha.3..next -->
+
+_Apr 24, 2024_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔥 Converted 3 more Material UI components to use Pigment CSS.
+- ℹ️ Pigment CSS now lives in [its own repository](https://github.com/mui/pigment-css)! From now on, all future development will happen there.
+
+### `@mui/material@6.0.0-alpha.4`
+
+- [Checkbox] Convert to support CSS extraction (#41957) @lhilgert9
+- [IconButton] Convert to support CSS extraction (#41850) @gijsbotje
+- [Radio] Convert to support CSS extraction (#41840) @lhilgert9
+- [Typography] Fix ownerState prop placement (#41903) @sai6855
+- Generate typography tokens (#41703) @siriwatknp
+- Move typography CSS variables to `font` (#42003) @siriwatknp
+- Fix getOverlayAlpha type (#41995) @oliviertassinari
+- Support CSS Extraction using codemod (#41935) @siriwatknp
+
+### `@mui/icons-material@6.0.0-alpha.4`
+
+- &#8203;<!-- 08 -->[icons] Update the icons package (#41937) @danilo-leal
+
+### Docs
+
+- [material-ui] Remove react-swipeable-views from demos as it's no longer maintained (#41912) @soler1212
+- [material-ui] Add dark theme thumbnails for templates (#41947) @zanivan
+- [material-ui] Remove links and interdependencies from free templates (#41941) @zanivan
+- [material-ui] Add missing backticks to HTML tag in the installation page (#41972) @Miguelrom
+- Fix 301 Toolpad links @oliviertassinari
+- Fix 301 image redirections @oliviertassinari
+
+### Core
+
+- pnpm docs:zipRules && vale sync @oliviertassinari
+- Remove @pigment-css/\* packages (#41965) @mnajdova
+- [code-infra] Move the HighlightedCode component to @mui/docs (#41859) @Janpot
+- [code-infra] Move the HighlightedCode component to @mui/docs (#41859) @Janpot
+- [code-infra] Make Babel config path configurable in API docs builder (#41999) @michaldudak
+- [docs-infra] Fix flex-shrink pro-plan (#41990) @oliviertassinari
+- [docs-infra] Allow more value uses of MUI (#41706) @oliviertassinari
+- [docs-infra] Move CPU to shared config (#41901) @oliviertassinari
+- [docs-infra] Improve Twitter OG:image (#41860) @oliviertassinari
+- [docs-infra] Adapt docs infra to Base UI docs needs (#41963) @michaldudak
+- [docs-infra] Add demo container design refinements (#41948) @danilo-leal
+- [docs-infra] Use the `getLayout` on the material demo pages (#41936) @alexfauquette
+- [test] Update browser versions in karma config (#42008) @ZeeshanTamboli
+- [website] Remove customer support agent role from website (#41969) @rluzists1
+- [website] Fix grid usage and add stray improvements (#41930) @danilo-leal
+
+All contributors of this release in alphabetical order: @alexfauquette, @danilo-leal, @gijsbotje, @Janpot, @lhilgert9, @michaldudak, @Miguelrom, @mnajdova, @oliviertassinari, @rluzists1, @sai6855, @siriwatknp, @soler1212, @zanivan, @ZeeshanTamboli
+
 ## v6.0.0-alpha.3
 
 <!-- generated comparing v6.0.0-alpha.2..next -->

package/cssVars/index.d.ts

@@ -2,4 +2,6 @@ export { default } from './createCssVarsProvider';
 export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
 export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
+export { default as prepareTypographyVars } from './prepareTypographyVars';
+export type { ExtractTypographyTokens } from './prepareTypographyVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';

package/cssVars/index.js

@@ -3,4 +3,5 @@
 export { default } from './createCssVarsProvider';
 export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
+export { default as prepareTypographyVars } from './prepareTypographyVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';

package/cssVars/prepareTypographyVars.d.ts

@@ -0,0 +1,8 @@
+type RecordPropertyNames<T> = {
+    [K in keyof T]: T[K] extends Function ? never : T[K] extends Record<string, any> ? K : never;
+}[keyof T];
+export type ExtractTypographyTokens<T> = {
+    [K in RecordPropertyNames<T>]: string;
+};
+export default function prepareTypographyVars<T extends Record<string, any>>(typography: T): ExtractTypographyTokens<T>;
+export {};

package/cssVars/prepareTypographyVars.js

@@ -0,0 +1,11 @@
+export default function prepareTypographyVars(typography) {
+  const vars = {};
+  const entries = Object.entries(typography);
+  entries.forEach(entry => {
+    const [key, value] = entry;
+    if (typeof value === 'object') {
+      vars[key] = `${value.fontStyle ? `${value.fontStyle} ` : ''}${value.fontVariant ? `${value.fontVariant} ` : ''}${value.fontWeight ? `${value.fontWeight} ` : ''}${value.fontStretch ? `${value.fontStretch} ` : ''}${value.fontSize || ''}${value.lineHeight ? `/${value.lineHeight} ` : ''}${value.fontFamily || ''}`;
+    }
+  });
+  return vars;
+}

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.3
+ * @mui/system v6.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/cssVars/index.js

@@ -3,4 +3,5 @@
 export { default } from './createCssVarsProvider';
 export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
+export { default as prepareTypographyVars } from './prepareTypographyVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';

package/modern/cssVars/prepareTypographyVars.js

@@ -0,0 +1,11 @@
+export default function prepareTypographyVars(typography) {
+  const vars = {};
+  const entries = Object.entries(typography);
+  entries.forEach(entry => {
+    const [key, value] = entry;
+    if (typeof value === 'object') {
+      vars[key] = `${value.fontStyle ? `${value.fontStyle} ` : ''}${value.fontVariant ? `${value.fontVariant} ` : ''}${value.fontWeight ? `${value.fontWeight} ` : ''}${value.fontStretch ? `${value.fontStretch} ` : ''}${value.fontSize || ''}${value.lineHeight ? `/${value.lineHeight} ` : ''}${value.fontFamily || ''}`;
+    }
+  });
+  return vars;
+}

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.3
+ * @mui/system v6.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styleFunctionSx/defaultSxConfig.js

@@ -267,6 +267,9 @@ const defaultSxConfig = {
   },
   boxSizing: {},
   // typography
+  font: {
+    themeKey: 'font'
+  },
   fontFamily: {
     themeKey: 'typography'
   },

package/node/cssVars/index.js

@@ -29,7 +29,14 @@ Object.defineProperty(exports, "prepareCssVars", {
     return _prepareCssVars.default;
   }
 });
+Object.defineProperty(exports, "prepareTypographyVars", {
+  enumerable: true,
+  get: function () {
+    return _prepareTypographyVars.default;
+  }
+});
 var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
 var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));
 var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
+var _prepareTypographyVars = _interopRequireDefault(require("./prepareTypographyVars"));
 var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));

package/node/cssVars/prepareTypographyVars.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = prepareTypographyVars;
+function prepareTypographyVars(typography) {
+  const vars = {};
+  const entries = Object.entries(typography);
+  entries.forEach(entry => {
+    const [key, value] = entry;
+    if (typeof value === 'object') {
+      vars[key] = `${value.fontStyle ? `${value.fontStyle} ` : ''}${value.fontVariant ? `${value.fontVariant} ` : ''}${value.fontWeight ? `${value.fontWeight} ` : ''}${value.fontStretch ? `${value.fontStretch} ` : ''}${value.fontSize || ''}${value.lineHeight ? `/${value.lineHeight} ` : ''}${value.fontFamily || ''}`;
+    }
+  });
+  return vars;
+}

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.3
+ * @mui/system v6.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styleFunctionSx/defaultSxConfig.js

@@ -273,6 +273,9 @@ const defaultSxConfig = {
   },
   boxSizing: {},
   // typography
+  font: {
+    themeKey: 'font'
+  },
   fontFamily: {
     themeKey: 'typography'
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.0.0-alpha.3",
+  "version": "6.0.0-alpha.4",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
+    "@mui/utils": "^6.0.0-alpha.3",
     "@mui/private-theming": "^6.0.0-alpha.3",
-    "@mui/styled-engine": "^6.0.0-alpha.3",
     "@mui/types": "^7.2.14",
-    "@mui/utils": "^6.0.0-alpha.3"
+    "@mui/styled-engine": "^6.0.0-alpha.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styleFunctionSx/defaultSxConfig.js

@@ -267,6 +267,9 @@ const defaultSxConfig = {
   },
   boxSizing: {},
   // typography
+  font: {
+    themeKey: 'font'
+  },
   fontFamily: {
     themeKey: 'typography'
   },