feat(org-chart): support external CSS themes and align documentation

packages/org-chart/src/core/expanded-content.ts

@@ -27,8 +27,6 @@ export function decorateExpandedNode(node: HTMLElement, value: RenderEngineNode,
   const vertical = value.vertical === true || (context.autoLayout?.type === 'hybrid' && Number(value.depth) + 1 >= context.autoLayout.hybridStartDepth);
   node.dataset.verticalLayout = String(vertical);
   const layoutDirection = context.autoLayout?.type === 'lr' || vertical ? 'left' : 'top';
-  node.style.setProperty('--hm-orgchart-expanded-primary', preset.primary);
-  preset.secondary.forEach((color, index) => node.style.setProperty(`--hm-orgchart-expanded-secondary-${index + 1}`, color));
   for (const edge of node.querySelectorAll('.edge')) edge.setAttribute('aria-hidden', 'true');
   const leaderId = top?.employeeId === undefined ? organization.leaderId : top.employeeId;
   const leader = context.data.employees.find(employee => employee.id === leaderId && employee.organizationId === organization.id);
@@ -62,7 +60,6 @@ export function decorateExpandedNode(node: HTMLElement, value: RenderEngineNode,
     card.draggable = false;
     const employeePreset = getCompanyColorPreset(affiliationId) ?? preset;
     card.dataset.companyId = employeePreset.companyId;
-    card.style.setProperty('--hm-orgchart-expanded-card-primary', `var(--hm-orgchart-company-${employeePreset.companyId})`);
     return card;
   };
   if (leader && top?.display !== 'hidden' && top?.display !== 'titleOnly') {
@@ -103,10 +100,6 @@ export function createExpandedOrgChartContent(document: Document, context: Rende
   content.dataset.groupHybrid = String(!!context.autoLayout?.hybridOrganizationIds.length);
   content.dataset.layoutStatus = 'hierarchical';
   content.dataset.cardDesignStatus = 'current-presentation';
-  for (const company of new Set([...context.organizationCompanies!.values(), ...context.data.employees.map(employee => employee.affiliationId)])) {
-    const preset = getCompanyColorPreset(company);
-    if (preset) content.style.setProperty(`--hm-orgchart-company-${company}`, preset.primary);
-  }
   tree.setAttribute('aria-label', `확장형 조직 계층도 · ${presentation.wheelZoom === 'direct' ? '휠로 확대·축소' : 'Ctrl 또는 Command + 휠로 확대'} · 드래그로 이동`);
   // Chart Only: titles inside organization nodes remain; the outer heading does not.
   if (presentation.chartOnly) content.append(tree);