[system] Expose spacing unit as a CSS variable

[acomanescu]

Summary 💡

I know I can access it using the theme as JS object, but I need it as a CSS variable for RSC styles.

Examples 🌈

:root {
  --joy-spacing: 8px;
}

It must include the PX to be able to use calc css fn.

Motivation 🔦

I've found some interesting use cases where I need to use the theme spacing unit as a CSS variable.

[siriwatknp]

Thanks for reporting the issue! I think we have to find a way for non-breaking change.

I am thinking that the theme.spacing(…) should produce calc(…), that's it.

theme.spacing(2) // calc(var(--joy-spacing, 8px) * 2)
theme.spacing(1, 2) // calc(var(--joy-spacing, 8px) * 1) calc(var(--joy-spacing, 8px) * 2)

However, I don't think everyone would agree with me so we have to provide some opt-in function I guess.

As a workaround, you can replace the theme.spacing with your own implementation.