From e20cb4a9991bbc237026724d5abe70f04bbba455 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Tue, 23 May 2023 13:46:56 +0530
Subject: [PATCH] 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 | 14 ++++++++++----
 packages/embeds/embed-core/index.html           |  4 ++++
 packages/embeds/embed-core/playground.ts        |  8 +++-----
 packages/embeds/embed-core/src/embed-iframe.ts  |  2 +-
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/embeds/embed-core/embed-iframe-init.ts b/packages/embeds/embed-core/embed-iframe-init.ts
index e5b0d3d89d..e46f49f0a3 100644
--- a/packages/embeds/embed-core/embed-iframe-init.ts
+++ b/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);
   };
 }
diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html
index 67559d77a5..f674a8f8c2 100644
--- a/packages/embeds/embed-core/index.html
+++ b/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]
diff --git a/packages/embeds/embed-core/playground.ts b/packages/embeds/embed-core/playground.ts
index ff5c9b7a50..9de4179f70 100644
--- a/packages/embeds/embed-core/playground.ts
+++ b/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,
diff --git a/packages/embeds/embed-core/src/embed-iframe.ts b/packages/embeds/embed-core/src/embed-iframe.ts
index 974db94e85..65e173e8e3 100644
--- a/packages/embeds/embed-core/src/embed-iframe.ts
+++ b/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"
       );
     }