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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hai3/uikit",
-  "version": "0.3.0-alpha.1",
+  "version": "0.4.0-alpha.0",
   "description": "HAI3 UI Kit - Reusable React components built on shadcn/ui",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/styles/applyTheme.ts

@@ -109,3 +109,105 @@ export const applyTheme = (theme: Theme, themeName?: string): void => {
     root.style.fontSize = '';
   }
 };
+
+/**
+ * Apply theme to a shadow root by injecting CSS variables
+ * Uses :host selector instead of document.documentElement
+ * Idempotent - reuses existing style element with id __hai3-theme-vars__
+ *
+ * @param shadowRoot - The shadow root to inject theme variables into
+ * @param theme - Theme object to apply
+ * @param themeName - Optional theme name for data attribute
+ */
+export const applyThemeToShadowRoot = (
+  shadowRoot: ShadowRoot,
+  theme: Theme,
+  themeName?: string
+): void => {
+  // Get or create style element
+  let styleElement = shadowRoot.getElementById('__hai3-theme-vars__') as HTMLStyleElement | null;
+  if (!styleElement) {
+    styleElement = document.createElement('style');
+    styleElement.id = '__hai3-theme-vars__';
+    shadowRoot.appendChild(styleElement);
+  }
+
+  // Set data-theme attribute for debugging
+  if (themeName) {
+    styleElement.setAttribute('data-theme', themeName);
+  }
+
+  // Generate CSS variable declarations
+  const cssVars: string[] = [];
+
+  // Shadcn color variables
+  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)};`);
+
+  // State colors
+  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)};`);
+
+  // Chart colors (OKLCH format - pass as-is)
+  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]};`);
+
+  // Left menu colors
+  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)};`);
+
+  // Spacing
+  Object.entries(theme.spacing).forEach(([key, value]) => {
+    cssVars.push(`--spacing-${key}: ${value};`);
+  });
+
+  // Border radius
+  Object.entries(theme.borderRadius).forEach(([key, value]) => {
+    cssVars.push(`--radius-${key}: ${value};`);
+  });
+
+  // Shadows
+  Object.entries(theme.shadows).forEach(([key, value]) => {
+    cssVars.push(`--shadow-${key}: ${value};`);
+  });
+
+  // Transitions
+  Object.entries(theme.transitions).forEach(([key, value]) => {
+    cssVars.push(`--transition-${key}: ${value};`);
+  });
+
+  // Build CSS content
+  let cssContent = `:host {\n  ${cssVars.join('\n  ')}\n}`;
+
+  // For -large themes: add font-size rule
+  if (themeName?.endsWith('-large')) {
+    cssContent += '\n\n:host {\n  font-size: 125%;\n}';
+  }
+
+  styleElement.textContent = cssContent;
+};