How to override the spacing size value with custom css

[amacaulay-ch]

I'm trying to modify the core/group block to allow for custom spacing. I need it to be responsive and for me I think the best way is to use a custom class.

According to this section, one should be able to use a custom css variable.

When I try to use the same variable in the example the result is not the same.

My theme.json:

"spacingSizes": [
        {
          "slug": "sm",
          "name": "SM",
          "size": "var(--wp--custom--spacing--sm)"
        },
        {
          "slug": "md",
          "name": "MD",
          "size": "var(--wp--custom--spacing--md)"
        },
        {
          "slug": "lg",
          "name": "LG",
          "size": "var(--wp--custom--spacing--lg)"
        }
]

My css:

body {
  --wp--custom--spacing--sm {
    padding: 2rem;
  }
  --wp--custom--spacing--md {
    padding: 3rem;
  }
  --wp--custom--spacing--lg {
    padding: 6rem;
  }
}

What i get on the style of the group block:

element.style {
    padding-top: var(--wp--preset--spacing--md);
    padding-right: var(--wp--preset--spacing--md);
    padding-bottom: var(--wp--preset--spacing--md);
    padding-left: var(--wp--preset--spacing--md);
}

And these vars are not defined.

Notice that the var is actually --wp--preset--spacing--md and not --wp--custom--spacing--md

It might be worth noting that I am building using ACF blocks, so not JavaScript based, but everything seems to be compiling correctly. I have a sense I'm missing something very simple here, but not sure where to go from here.