[material-ui] Review M3 token naming format

[DiegoAndai]

From #29345 (comment):

The CSS tokens used don't appear to follow M3 guidelines fully. Like the tokens generated by https://material-foundation.github.io/material-theme-builder/ and https://github.com/material-foundation/material-color-utilities are completely kebab-cased (like --md-sys-color-on-primary) but @mui/material-next appear to have the last part camel-cased (like --md-sys-color-onPrimary).
Is this something overlooked or am I missing something? Just saying coz, it would be great if all the libraries using M3 followed it completely (like https://github.com/material-components/material-web) so that they could be drop-in replaced easily and not worry about matching themes.

We should review our current CSS variable naming format so it makes copying themes as easy as possible.

Search keywords: M3 tokens