@hai3/uikit 0.3.0-alpha.1 → 0.4.0-alpha.0

package/dist/index.cjs

@@ -5817,6 +5817,70 @@ var applyTheme = (theme, themeName) => {
     root.style.fontSize = "";
   }
 };
+var applyThemeToShadowRoot = (shadowRoot, theme, themeName) => {
+  let styleElement = shadowRoot.getElementById("__hai3-theme-vars__");
+  if (!styleElement) {
+    styleElement = document.createElement("style");
+    styleElement.id = "__hai3-theme-vars__";
+    shadowRoot.appendChild(styleElement);
+  }
+  if (themeName) {
+    styleElement.setAttribute("data-theme", themeName);
+  }
+  const cssVars = [];
+  cssVars.push(`--background: ${hslToVar(theme.colors.background)};`);
+  cssVars.push(`--foreground: ${hslToVar(theme.colors.foreground)};`);
+  cssVars.push(`--card: ${hslToVar(theme.colors.background)};`);
+  cssVars.push(`--card-foreground: ${hslToVar(theme.colors.foreground)};`);
+  cssVars.push(`--popover: ${hslToVar(theme.colors.background)};`);
+  cssVars.push(`--popover-foreground: ${hslToVar(theme.colors.foreground)};`);
+  cssVars.push(`--primary: ${hslToVar(theme.colors.primary)};`);
+  cssVars.push(`--primary-foreground: ${hslToVar(theme.colors.background)};`);
+  cssVars.push(`--secondary: ${hslToVar(theme.colors.secondary)};`);
+  cssVars.push(`--secondary-foreground: ${hslToVar(theme.colors.foreground)};`);
+  cssVars.push(`--muted: ${hslToVar(theme.colors.muted)};`);
+  cssVars.push(`--muted-foreground: ${hslToVar(theme.colors.foreground)};`);
+  cssVars.push(`--accent: ${hslToVar(theme.colors.accent)};`);
+  cssVars.push(`--accent-foreground: ${hslToVar(theme.colors.background)};`);
+  cssVars.push(`--destructive: ${hslToVar(theme.colors.error)};`);
+  cssVars.push(`--destructive-foreground: ${hslToVar(theme.colors.foreground)};`);
+  cssVars.push(`--border: ${hslToVar(theme.colors.border)};`);
+  cssVars.push(`--input: ${hslToVar(theme.colors.border)};`);
+  cssVars.push(`--ring: ${hslToVar(theme.colors.primary)};`);
+  cssVars.push(`--error: ${hslToVar(theme.colors.error)};`);
+  cssVars.push(`--warning: ${hslToVar(theme.colors.warning)};`);
+  cssVars.push(`--success: ${hslToVar(theme.colors.success)};`);
+  cssVars.push(`--info: ${hslToVar(theme.colors.info)};`);
+  cssVars.push(`--chart-1: ${theme.colors.chart[1]};`);
+  cssVars.push(`--chart-2: ${theme.colors.chart[2]};`);
+  cssVars.push(`--chart-3: ${theme.colors.chart[3]};`);
+  cssVars.push(`--chart-4: ${theme.colors.chart[4]};`);
+  cssVars.push(`--chart-5: ${theme.colors.chart[5]};`);
+  cssVars.push(`--left-menu: ${hslToVar(theme.colors.mainMenu.DEFAULT)};`);
+  cssVars.push(`--left-menu-foreground: ${hslToVar(theme.colors.mainMenu.foreground)};`);
+  cssVars.push(`--left-menu-hover: ${hslToVar(theme.colors.mainMenu.hover)};`);
+  cssVars.push(`--left-menu-selected: ${hslToVar(theme.colors.mainMenu.selected)};`);
+  cssVars.push(`--left-menu-border: ${hslToVar(theme.colors.mainMenu.border)};`);
+  Object.entries(theme.spacing).forEach(([key, value]) => {
+    cssVars.push(`--spacing-${key}: ${value};`);
+  });
+  Object.entries(theme.borderRadius).forEach(([key, value]) => {
+    cssVars.push(`--radius-${key}: ${value};`);
+  });
+  Object.entries(theme.shadows).forEach(([key, value]) => {
+    cssVars.push(`--shadow-${key}: ${value};`);
+  });
+  Object.entries(theme.transitions).forEach(([key, value]) => {
+    cssVars.push(`--transition-${key}: ${value};`);
+  });
+  let cssContent = `:host {
+  ${cssVars.join("\n  ")}
+}`;
+  if (themeName?.endsWith("-large")) {
+    cssContent += "\n\n:host {\n  font-size: 125%;\n}";
+  }
+  styleElement.textContent = cssContent;
+};
 
 Object.defineProperty(exports, "flexRender", {
   enumerable: true,
@@ -6331,6 +6395,7 @@ exports.UiKitIcon = UiKitIcon;
 exports.UserInfo = UserInfo;
 exports.alertVariants = alertVariants;
 exports.applyTheme = applyTheme;
+exports.applyThemeToShadowRoot = applyThemeToShadowRoot;
 exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.emptyMediaVariants = emptyMediaVariants;