[PetriLahdelma]

As discussed in #665: the spacing scale as native CSS variables in a separate file, with screenshots.

sass/spacing.css (new, forwarded from materialize.scss after the M3 tokens):

:root {
  --mw-space-0: 0;
  --mw-space-1: 0.25em;
  --mw-space-2: 0.5em;
  --mw-space-3: 0.75em;
  --mw-space-4: 1em;
  --mw-space-5: 1.5em;
  --mw-space-6: 3em;
}

$spacing-values now points at these variables, so the m-* and p-* helpers follow any client-side override.

The six declarations that were off the scale. Your root font size is 14px, so the steps are 3.5, 7, 10.5, 14, 21 and 42px. My comment in #665 assumed 16px; at 14px three of the nearest steps are different, so I used those:

Where	Before	After	Computed at 14px
blockquote margin	20px 0	var(--mw-space-5) 0	20px to 21px
.page-footer margin-top	5rem	var(--mw-space-6)	70px to 42px, as you suggested
.footer-copyright padding	10px 0px	var(--mw-space-3) 0	10px to 10.5px
td, th padding	15px 5px	var(--mw-space-4) var(--mw-space-1)	15px 5px to 14px 3.5px
.responsive-table thead tr padding	0 10px 0 0	0 var(--mw-space-3) 0 0	10px to 10.5px
.responsive-table tr padding	0 10px	0 var(--mw-space-3)	10px to 10.5px

Helper classes. At the 14px root, em and rem give the same result, so .p-1 to .p-6 and the margin helpers render exactly as before in normal text. The difference is inside an element with its own font size, such as a heading or a small chip: there the helpers now scale with that text. That is what em means, and it may be worth a line in the release notes.

Screenshots of v2-dev and this branch side by side, built with npm run build. The responsive table is shown below 992px.

Light:

Dark:

npm run lint and npm test (50 tests) pass.

[wuda-io]

ok LGTM

[wuda-io]

LGTM