[material-ui] Fix negative input for CSS variables spacing array

[siriwatknp]

closes #45500

Issue

Using negative spacing input does not work

const theme =createTheme({ cssVariables: true, spacing: [0, 4, 8] });

theme.spacing(-2) // ❌ does not work, it should produce `calc(-1 * var(--mui-spacing-2))`

Root cause

The logic does not handle the negative input, e.g. theme.spacing(-2) when the spacing input is an array and CSS variables enabled.

Please see the tests.

Improvements

This PR also include improvements for input value as 0 and 1 to save some bytes.

Before:

theme.spacing(0); // calc(0 * var(--mui-spacing))
theme.spacing(1); // calc(1 * var(--mui-spacing))

After:

theme.spacing(0); // 0
theme.spacing(1); // var(--mui-spacing)

---

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

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 016a3a2