Make sure that all CSS custom variables that are used in templates match existing variables.

[carolinan]

Describe the bug Follow up to https://github.com/lightspeedwp/lsx-design/issues/21 There are references in the templates to CSS variables that are not in the theme. These still work in a sense, because they have fallbacks:

style="padding-top:var(--wp--custom--spacing--small, 1.00rem)

[krugazul]

@carolinan , unfortunately we cannot remove these variables. They are part of WordPress, being generated from the theme.json file. We use these to custom variables to connect the "Design Tokens" from our Figma designs.

i.e https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#css-custom-properties-presets-custom

[carolinan]

The default spacing CSS variables generated by WordPress are --wp--preset--spacing--X not --wp--custom--spacing--

--wp--custom--X is generated from theme.json settings > custom: https://github.com/lightspeedwp/lsx-design/blob/main/theme.json#L290

This theme only adds one custom spacing under settings, but multiple spacing presets under settings > spacing: https://github.com/lightspeedwp/lsx-design/blob/main/theme.json#L299

Just double checking that you did not mean--wp--custom--spacing--small to be --wp--preset--spacing--small.

[krugazul]

@carolinan , we have fixed these variables in a few commits in PR #33 ,

• f6fec39
• 072337c