fix: refactor imports from ui library

Author: jmikitova

src/web/src/utils/init-widget.tsx

@@ -1,8 +1,7 @@
 import "../index.css";
 import React from "react";
 import { UiDependencyProvider } from "@apify/ui-library";
-import { tokens as lightCssVariables } from "@apify/ui-library/dist/src/design_system/colors/generated/css_variables.light.js";
-import { tokens as darkCssVariables } from "@apify/ui-library/dist/src/design_system/colors/generated/css_variables.dark.js";
+import { cssColorsVariablesLight, cssColorsVariablesDark } from "@apify/ui-library";
 import { ThemeProvider } from "styled-components";
 import { createRoot } from "react-dom/client";
 
@@ -18,6 +17,68 @@ function applyTheme(theme: "light" | "dark") {
     document.documentElement.classList.toggle("dark", theme === "dark");
 }
 
+/**
+ * Helper to create and inject a link or style element if it doesn't already exist.
+ */
+function injectElement<K extends "link" | "style">(
+    id: string,
+    tagName: K,
+    attributes: Partial<HTMLLinkElement | HTMLStyleElement>
+): void {
+    if (document.getElementById(id)) {
+        return;
+    }
+
+    const element = document.createElement(tagName);
+    element.id = id;
+
+    // Apply all attributes to the element
+    Object.entries(attributes).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+            (element as any)[key] = value;
+        }
+    });
+
+    // Insert at the beginning of head to allow user styles to override
+    if (document.head.firstChild) {
+        document.head.insertBefore(element, document.head.firstChild);
+    } else {
+        document.head.appendChild(element);
+    }
+}
+
+/**
+ * Injects all required stylesheets, fonts, and CSS variables into the document head.
+ */
+function injectStylesheets(): void {
+    // Preconnect to Google Fonts for better performance
+    injectElement("apify-fonts-preconnect-1", "link", {
+        rel: "preconnect",
+        href: "https://fonts.googleapis.com",
+    });
+
+    injectElement("apify-fonts-preconnect-2", "link", {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossOrigin: "anonymous",
+    });
+
+    // Load Google Fonts stylesheet
+    injectElement("apify-fonts-stylesheet", "link", {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap",
+    });
+
+    // Inject CSS variables
+    injectElement("apify-css-variables", "style", {
+        textContent: `:root {${cssColorsVariablesLight}}`,
+    });
+    
+    injectElement("apify-dark-css-variables", "style", {
+        textContent: `:root[data-theme="dark"] { ${cssColorsVariablesDark} }`,
+    });
+}
+
 export const renderWidget = (Component: React.FC) => {
     const initWidget = () => {
         const rootElement = document.getElementById("root");
@@ -45,49 +106,9 @@ export const renderWidget = (Component: React.FC) => {
 
         window.setInterval(checkTheme, 1000);
 
-        const root = createRoot(rootElement);
+        injectStylesheets();
 
-        // Inject fonts and CSS variables for proper styling
-        const head = document.head || document.getElementsByTagName("head")[0];
-        if (head) {
-            // Fonts preconnect + stylesheet
-            if (!document.getElementById("apify-fonts-preconnect-1")) {
-                const link1 = document.createElement("link");
-                link1.id = "apify-fonts-preconnect-1";
-                link1.rel = "preconnect";
-                link1.href = "https://fonts.googleapis.com";
-                head.appendChild(link1);
-            }
-            if (!document.getElementById("apify-fonts-preconnect-2")) {
-                const link2 = document.createElement("link");
-                link2.id = "apify-fonts-preconnect-2";
-                link2.rel = "preconnect";
-                link2.href = "https://fonts.gstatic.com";
-                link2.crossOrigin = "anonymous";
-                head.appendChild(link2);
-            }
-            if (!document.getElementById("apify-fonts-stylesheet")) {
-                const linkFonts = document.createElement("link");
-                linkFonts.id = "apify-fonts-stylesheet";
-                linkFonts.rel = "stylesheet";
-                linkFonts.href = "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap";
-                head.appendChild(linkFonts);
-            }
-
-            // CSS variables for light/dark themes
-            if (!document.getElementById("apify-css-variables")) {
-                const styleLight = document.createElement("style");
-                styleLight.id = "apify-css-variables";
-                styleLight.textContent = `:root {${lightCssVariables}}`;
-                head.appendChild(styleLight);
-            }
-            if (!document.getElementById("apify-dark-css-variables")) {
-                const styleDark = document.createElement("style");
-                styleDark.id = "apify-dark-css-variables";
-                styleDark.textContent = `:root[data-theme="dark"] { ${darkCssVariables} }`;
-                head.appendChild(styleDark);
-            }
-        }
+        const root = createRoot(rootElement);
 
         const dependencies = {
             InternalLink: React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string; replace?: boolean }>(