--cal-brand-color is not adjustable through cssVarsPerTheme

[ErikHendrikson]

Issue Summary

It seems the --cal-brand-color is not adjustable through cssVarsPerTheme. And this is probably due to cal-brand-color being undefined at classname .bg-brand. This is happening in the react inline embed.

Steps to Reproduce

1. go to https://codesandbox.io/p/sandbox/embed-advanced-css-vars-x2sdgy.
2. find in the chrometools.
3. classname .bg-brand cannot find cal-brand-color (--cal-brand-color is not defined) and uses the 'black' fallback.

I am expecting to be able to change the cssvars through cssVarsPerTheme, but cal-brand-color is therefore not adjustable. The loader always stays black.

Actual Results

• The loader stays black instead of another color.

Expected Results

• The css-var cal-brand-color is defined and therefore can be overwritten through cssVarsPerTheme.

Technical details

• Chrome 128.0.6613.115
• @calcom/embed-react": "^1.5.1", "next": "14.2.8", "react": "^18", "react-dom": "^18"

Evidence

[jordn]

You can do this. You just need to supply the variables without the -- at the start

e.g.

    getCalApi({ namespace: "20min" }).then((cal) => {
      cal("ui", {
        styles: { branding: { brandColor: "#000000" } },
        hideEventTypeDetails: false,

        cssVarsPerTheme: {
          light: {
            "cal-border-booker": "red", // Custom border color
            "cal-border-booker-width": "20px", // Custom border width
          },
          dark: {
            "cal-border-booker": "blue",
          },
        },
      });
...

See https://github.com/calcom/cal.com/pull/8169

[hariombalhara]

You can do it as shown in the following demo.

https://codesandbox.io/p/sandbox/embed-ui-customization-using-css-vars-zix02l