fix: CSS variable pollution (#7026)

packages/survey-ui/src/styles/globals.css

@@ -24,7 +24,7 @@
    Design Tokens
    ============================================================================= */
 
-:root {
+#fbjs {
   /* ---------------------------------------------------------------------------
      Base Primitives
      These are the foundation tokens used throughout the design system.
@@ -206,27 +206,27 @@
    Textarea Scrollbar Styling
    Smaller, more subtle scrollbars for textarea elements.
    --------------------------------------------------------------------------- */
-textarea {
+#fbjs textarea {
   /* Firefox */
   scrollbar-width: thin;
   scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3) transparent;
 }
 
 /* Chrome, Edge, and Safari */
-textarea::-webkit-scrollbar {
+#fbjs textarea::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
 
-textarea::-webkit-scrollbar-track {
+#fbjs textarea::-webkit-scrollbar-track {
   background: transparent;
 }
 
-textarea::-webkit-scrollbar-thumb {
+#fbjs textarea::-webkit-scrollbar-thumb {
   background-color: hsl(215.4 16.3% 46.9% / 0.3);
   border-radius: 2px;
 }
 
-textarea::-webkit-scrollbar-thumb:hover {
+#fbjs textarea::-webkit-scrollbar-thumb:hover {
   background-color: hsl(215.4 16.3% 46.9% / 0.5);
 }

packages/surveys/src/lib/styles.test.ts

@@ -225,7 +225,7 @@ describe("addCustomThemeToDom", () => {
   const getCssVariables = (styleElement: HTMLStyleElement | null): Record<string, string> => {
     if (!styleElement || !styleElement.innerHTML) return {};
     const cssText = styleElement.innerHTML;
-    const rootMatch = cssText.match(/:root\s*{\s*([^}]*?)\s*}/);
+    const rootMatch = cssText.match(/#fbjs\s*{\s*([^}]*?)\s*}/);
     if (!rootMatch || !rootMatch[1]) return {};
 
     const variables: Record<string, string> = {};

packages/surveys/src/lib/styles.ts

@@ -78,8 +78,8 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
     document.head.appendChild(styleElement);
   }
 
-  // Start the innerHTML string with :root
-  let cssVariables = ":root {\n";
+  // Start the innerHTML string with #fbjs
+  let cssVariables = "#fbjs {\n";
 
   // Helper function to append the variable if it's not undefined
   const appendCssVariable = (variableName: string, value?: string) => {
@@ -179,7 +179,7 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
     }
   }
 
-  // Close the :root block
+  // Close the #fbjs block
   cssVariables += "}";
 
   // Set the innerHTML of the style element

packages/surveys/src/styles/global.css

@@ -18,20 +18,15 @@
 */
 @layer base {
 
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
+  #fbjs *,
+  #fbjs ::after,
+  #fbjs ::before,
+  #fbjs ::backdrop,
+  #fbjs ::file-selector-button {
     border-color: var(--color-gray-200, currentcolor);
   }
 }
 
-/* @import "./survey.css"; */
-
-#fbjs {
-  font-size: 16px;
-}
 
 /* Chrome, Edge, and Safari */
 #fbjs *::-webkit-scrollbar {
@@ -56,19 +51,20 @@
 }
 
 /* this is for styling the HtmlBody component */
-.htmlbody {
+#fbjs .htmlbody {
   @apply block text-sm font-normal leading-6;
   /* need to use !important because in packages/survey-ui/components/editor/styles-editor-frontend.css the color is defined for some classes */
   color: var(--fb-subheading-color) !important;
 }
 
 /* without this, it wont override the color */
-p.editor-paragraph {
+#fbjs p.editor-paragraph {
   overflow-wrap: break-word;
 }
 
 /* theming */
-:root {
+#fbjs {
+  font-size: 16px;
   --brand-default: #64748b;
   --slate-50: rgb(248, 250, 252);
   --slate-100: rgb(241 245 249);
@@ -126,7 +122,7 @@ p.editor-paragraph {
   }
 }
 
-.no-scrollbar {
+#fbjs .no-scrollbar {
   -ms-overflow-style: none !important;
   /* Internet Explorer 10+ */
   scrollbar-width: thin !important;
@@ -145,6 +141,6 @@ p.editor-paragraph {
   }
 }
 
-.grecaptcha-badge {
+#fbjs .grecaptcha-badge {
   visibility: hidden;
 }