[cssVariables] Creating variables for typography with responsive incorrectly and not work

[mtr1990]

Steps to reproduce

When create theme with typography with h1 include responsive:

const theme = createTheme({
...
  typography: {
    fontFamily: roboto.style.fontFamily,
    h1: {
      fontSize: '2.8rem',
      color: 'red',
      fontWeight: 'bold',
      '@media (min-width:300px)': {
        fontSize: '3rem',
      },
      '@media (min-width:400px)': {
        fontSize: '4rem',
      },
    },
  ...
  },
...
  },
});

Current behavior

This variable appears to be non-existent or malformed

// output:
  '@media (min-width:400px)': {
    fontSize: var(--typography-h1-@media (min-width:400px)-fontSize)
  },

https://stackblitz.com/edit/github-emurbz?file=src%2Ftheme.ts,src%2Fapp%2Fpage.tsx,src%2Fcomponents%2FProTip.tsx,src%2Fcomponents%2FCopyright.tsx

Expected behavior

Generate variables that match media keys (300px, 400px...) and accept these values.

Context

No response

Your environment

No response

Search keywords: cssVariables typography responsive

[mtr1990]

The current default theme mixins.toolbar also has this problem.

Variable generator seems misleading when working with @media.

I think this case is like: #44212

[siriwatknp]

@mtr1990 What's the reason behind the custom shouldSkipGeneratingVar? It's not intended to be customized, at least we don't have a documentation of it yet.

[mtr1990]

@mtr1990 What's the reason behind the custom shouldSkipGeneratingVar? It's not intended to be customized, at least we don't have a documentation of it yet.

I only see typography variables created whenshouldSkipGeneratingVar is used. So if not usingshouldSkipGeneratingVar option how to access typography with theme.vars.typography?

Because I also want to use these variables for .css files not .js like var(--typography-h1)

So css files do not accept syntax like theme.typography.h1. I see the --font-h1 variable is created by default. But it doesn't apply to responsive.

[siriwatknp]

The current CSS theme variables don't support responsive typography yet. Mark this issue as a new feature.