Fix: Embed - branding CSS variables not configurable. (#9026)

* Fix bug in overriding css vars

* Fix CSS specificity issues

packages/embeds/embed-core/embed-iframe-init.ts

@@ -39,17 +39,23 @@ export default function EmbedInitIframe() {
       for (const [themeName, cssVars] of Object.entries(cssVarsPerTheme)) {
         cssVarsStyle.push(`.${themeName} {`);
         for (const [cssVarName, value] of Object.entries(cssVars)) {
-          cssVarsStyle.push(`--${cssVarName}: ${value};`);
+          // The styles are applied inline on .light/.dark elements by the codebase(useCalcomTheme). So, to make sure embed styles take precedence, we add !important
+          cssVarsStyle.push(`--${cssVarName}: ${value} !important;`);
         }
         cssVarsStyle.push(`}`);
       }
     }
+
+    const existingStyleEl = document.head.querySelector("#embed-css-vars") as HTMLStyleElement;
+    if (existingStyleEl) {
+      console.warn("Existing embed CSS Vars are being reset");
+      existingStyleEl.innerText = cssVarsStyle.join("\n");
+      return;
+    }
+
     const style = document.createElement("style");
     style.id = "embed-css-vars";
     style.innerText = cssVarsStyle.join("\n");
-    if (document.head.querySelector("#embed-css-vars")) {
-      return;
-    }
     document.head.appendChild(style);
   };
 }

packages/embeds/embed-core/index.html

@@ -180,6 +180,10 @@
             onclick="(function () {Cal.ns.second('ui', {cssVarsPerTheme:{light:{'cal-border-booker':'green', 'cal-border-booker-width':'20px'},dark:{'cal-border-booker':'red', 'cal-border-booker-width':'5px'}}})})()">
             Change booker border for dark and light themes
           </button>
+          <button
+          onclick="(function () {Cal.ns.second('ui', {cssVarsPerTheme:{light:{'cal-brand':'green'},dark:{'cal-brand':'red'}}})})()">
+          Change Brand color for dark and light theme
+        </button>
           <button
             onclick="(function () {Cal.ns.second('ui', {styles:{eventTypeListItem:{backgroundColor:'blue'}}})})()">
             Change <code>eventTypeListItem</code> bg color[Deprecated]

packages/embeds/embed-core/playground.ts

@@ -42,9 +42,7 @@ if (only === "all" || only === "ns:second") {
     origin: "http://localhost:3000",
   });
 
-  // Bulk API is supported - Keep all configuration at one place.
-  // Not able to type Bulk Api correctly when the first argument itself is an array.
-  Cal.ns.second([
+  Cal.ns.second(
     "inline",
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
@@ -57,8 +55,8 @@ if (only === "all" || only === "ns:second") {
         },
         theme: "auto",
       },
-    },
-  ]);
+    }
+  );
   Cal.ns.second("on", {
     action: "*",
     callback,

packages/embeds/embed-core/src/embed-iframe.ts

@@ -288,7 +288,7 @@ const methods = {
 
     if (stylesConfig) {
       console.warn(
-        "Cal.com Embed: `styles` prop is deprecated. Use `cssVarsPerTheme` instead to achieve the same effect"
+        "Cal.com Embed: `styles` prop is deprecated. Use `cssVarsPerTheme` instead to achieve the same effect. Here is a list of CSS variables that are supported.https://github.com/calcom/cal.com/blob/main/packages/config/tailwind-preset.js#L19"
       );
     }