[material-ui][joy-ui] Move typography CSS variables to font (#42003)

mui · Apr 24, 2024 · fc8fd64 · fc8fd64
1 parent ab7b2f1
commit fc8fd64
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 12 deletions.
diff --git a/packages/mui-joy/src/styles/defaultTheme.test.js b/packages/mui-joy/src/styles/defaultTheme.test.js
@@ -13,6 +13,7 @@ describe('defaultTheme', () => {
         'components',
         'colorSchemes',
         'focus',
+        'font',
         'fontSize',
         'fontFamily',
         'fontWeight',

diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js
@@ -16,6 +16,7 @@ describe('extendTheme', () => {
         'colorSchemes',
         'defaultColorScheme',
         'focus',
+        'font',
         'fontSize',
         'fontFamily',
         'fontWeight',
@@ -51,6 +52,7 @@ describe('extendTheme', () => {
       'radius',
       'shadow',
       'focus',
+      'font',
       'fontFamily',
       'fontSize',
       'fontWeight',
@@ -156,7 +158,7 @@ describe('extendTheme', () => {
   describe('typography', () => {
     it('produce typography token by default', () => {
       const theme = extendTheme();
-      expect(Object.keys(theme.vars.typography)).to.deep.equal([
+      expect(Object.keys(theme.vars.font)).to.deep.equal([
         'h1',
         'h2',
         'h3',
@@ -170,6 +172,28 @@ describe('extendTheme', () => {
         'body-xs',
       ]);
     });
+
+    it('access font vars', () => {
+      const theme = extendTheme();
+      expect(
+        theme.unstable_sx({
+          font: 'h1',
+        }),
+      ).to.deep.equal({
+        font: 'var(--joy-font-h1, var(--joy-fontWeight-xl, 700) var(--joy-fontSize-xl4, 2.25rem)/var(--joy-lineHeight-xs, 1.33334) var(--joy-fontFamily-display, "Inter", var(--joy-fontFamily-fallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol")))',
+      });
+    });
+
+    it('use provided value if no font', () => {
+      const theme = extendTheme();
+      expect(
+        theme.unstable_sx({
+          font: 'var(--custom-font)',
+        }),
+      ).to.deep.equal({
+        font: 'var(--custom-font)',
+      });
+    });
   });
 
   describe('theme.unstable_sx', () => {

diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts
@@ -385,6 +385,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
       light: lightColorSystem,
       dark: darkColorSystem,
     },
+    font: {},
     fontSize,
     fontFamily,
     fontWeight,
@@ -606,7 +607,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     cssVarPrefix,
     getCssVar,
     spacing: getSpacingVal(spacing),
-    typography: prepareTypographyVars(mergedScales.typography),
+    font: { ...prepareTypographyVars(mergedScales.typography), ...mergedScales.font },
   } as unknown as Theme & { attribute: string; colorSchemeSelector: string }; // Need type casting due to module augmentation inside the repo
   theme = cssContainerQueries(theme);
 

diff --git a/packages/mui-joy/src/styles/shouldSkipGeneratingVar.ts b/packages/mui-joy/src/styles/shouldSkipGeneratingVar.ts
@@ -1,6 +1,6 @@
 export default function shouldSkipGeneratingVar(keys: string[]) {
   return (
-    !!keys[0].match(/^(variants|breakpoints)$/) ||
+    !!keys[0].match(/^(typography|variants|breakpoints)$/) ||
     !!keys[0].match(/sxConfig$/) || // ends with sxConfig
     (keys[0] === 'palette' && !!keys[1]?.match(/^(mode)$/)) ||
     (keys[0] === 'focus' && keys[1] !== 'thickness')

diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts
@@ -85,7 +85,7 @@ interface ColorSystemVars extends Omit<ColorSystem, 'palette'> {
   palette: Omit<ColorSystem['palette'], 'mode'>;
 }
 export interface ThemeVars extends ThemeScales, ColorSystemVars {
-  typography: ExtractTypographyTokens<TypographySystem>;
+  font: ExtractTypographyTokens<TypographySystem>;
 }
 
 export interface ThemeCssVarOverrides {}

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.d.ts b/packages/mui-material/src/styles/experimental_extendTheme.d.ts
@@ -322,6 +322,7 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
 
 // should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function
 export interface ThemeVars {
+  font: ExtractTypographyTokens<Theme['typography']>;
   palette: Omit<
     ColorSystem['palette'],
     | 'colorScheme'
@@ -337,7 +338,6 @@ export interface ThemeVars {
   shape: Theme['shape'];
   spacing: string;
   zIndex: ZIndex;
-  typography: ExtractTypographyTokens<Theme['typography']>;
 }
 
 type Split<T, K extends keyof T = keyof T> = K extends string | number

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js
@@ -139,7 +139,7 @@ export default function extendTheme(options = {}, ...args) {
         overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays,
       },
     },
-    typography: prepareTypographyVars(muiTheme.typography),
+    font: { ...prepareTypographyVars(muiTheme.typography), ...muiTheme.font },
     spacing: getSpacingVal(input.spacing),
   };
 
@@ -437,7 +437,6 @@ export default function extendTheme(options = {}, ...args) {
   theme.getColorSchemeSelector = (colorScheme) => `[${theme.attribute}="${colorScheme}"] &`;
   theme.spacing = theme.generateSpacing();
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
-  theme.typography = muiTheme.typography;
   theme.unstable_sxConfig = {
     ...defaultSxConfig,
     ...input?.unstable_sxConfig,

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js
@@ -411,7 +411,7 @@ describe('experimental_extendTheme', () => {
   describe('typography', () => {
     it('produce typography token by default', () => {
       const theme = extendTheme();
-      expect(Object.keys(theme.vars.typography)).to.deep.equal([
+      expect(Object.keys(theme.vars.font)).to.deep.equal([
         'h1',
         'h2',
         'h3',
@@ -428,6 +428,28 @@ describe('experimental_extendTheme', () => {
         'inherit',
       ]);
     });
+
+    it('access font vars', () => {
+      const theme = extendTheme();
+      expect(
+        theme.unstable_sx({
+          font: 'h1',
+        }),
+      ).to.deep.equal({
+        font: 'var(--mui-font-h1, 300 6rem/1.167 "Roboto", "Helvetica", "Arial", sans-serif)',
+      });
+    });
+
+    it('use provided value if no font', () => {
+      const theme = extendTheme();
+      expect(
+        theme.unstable_sx({
+          font: 'var(--custom-font)',
+        }),
+      ).to.deep.equal({
+        font: 'var(--custom-font)',
+      });
+    });
   });
 
   describe('container queries', () => {

diff --git a/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts b/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts
@@ -1,6 +1,6 @@
 export default function shouldSkipGeneratingVar(keys: string[]) {
   return (
-    !!keys[0].match(/(cssVarPrefix|mixins|breakpoints|direction|transitions)/) ||
+    !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) ||
     !!keys[0].match(/sxConfig$/) || // ends with sxConfig
     (keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/))
   );

diff --git a/packages/mui-system/src/cssVars/prepareTypographyVars.test.ts b/packages/mui-system/src/cssVars/prepareTypographyVars.test.ts
@@ -1,11 +1,11 @@
 import { expect } from 'chai';
 import { createTheme } from '@mui/material/styles';
-import prepareTypographyTokens from './prepareTypographyVars';
+import prepareTypographyVars from './prepareTypographyVars';
 
 describe('prepareTypographyVars', () => {
   it('should prepare typography vars', () => {
     const theme = createTheme();
-    expect(prepareTypographyTokens(theme.typography)).to.deep.equal({
+    expect(prepareTypographyVars(theme.typography)).to.deep.equal({
       body1: '400 1rem/1.5 "Roboto", "Helvetica", "Arial", sans-serif',
       body2: '400 0.875rem/1.43 "Roboto", "Helvetica", "Arial", sans-serif',
       button: '500 0.875rem/1.75 "Roboto", "Helvetica", "Arial", sans-serif',

diff --git a/packages/mui-system/src/cssVars/prepareTypographyVars.ts b/packages/mui-system/src/cssVars/prepareTypographyVars.ts
@@ -4,7 +4,7 @@ type RecordPropertyNames<T> = {
 
 export type ExtractTypographyTokens<T> = { [K in RecordPropertyNames<T>]: string };
 
-export default function prepareTypographyTokens<T extends Record<string, any>>(typography: T) {
+export default function prepareTypographyVars<T extends Record<string, any>>(typography: T) {
   const vars: Record<string, string | number> = {};
   const entries = Object.entries(typography);
   entries.forEach((entry) => {

diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js
@@ -290,6 +290,9 @@ const defaultSxConfig = {
   boxSizing: {},
 
   // typography
+  font: {
+    themeKey: 'font',
+  },
   fontFamily: {
     themeKey: 'typography',
   },