[Joy] Fix typography fallback value

[siriwatknp]

closes #37000

Root cause

The getCssVar('fontFamily-body', 'JetBrains Mono') mistakenly wraps the JetBrains Mono with var(…).

Fixed by adding the fallback directly at the end of the variable:

- getCssVar('fontFamily-body', 'JetBrains Mono')
+ getCssVar('fontFamily-body, JetBrains Mono') // return `var(--joy-fontFamily-body, JetBrains Mono)`

Further improvement

This can be further improved in a separate PR by removing the entire logic for checking CSS value and use the above method instead to reduce Regex calculation:

diff --git a/packages/mui-system/src/cssVars/createGetCssVar.ts b/packages/mui-system/src/cssVars/createGetCssVar.ts
index 17eb0b7461..ae1a90ea4e 100644
--- a/packages/mui-system/src/cssVars/createGetCssVar.ts
+++ b/packages/mui-system/src/cssVars/createGetCssVar.ts
@@ -8,15 +8,7 @@ export default function createGetCssVar<T extends string = string>(prefix: strin
       return '';
     }
     const value = vars[0];
-    if (
-      typeof value === 'string' &&
-      !value.match(
-        /(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))|^(-?(\d*\.)?\d+)$|(\d+ \d+ \d+)/,
-      )
-    ) {
-      return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
-    }
-    return `, ${value}`;
+    return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
   }
 
   // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-37845--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 4d68d22

[siriwatknp]

This test case covers the issue.