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

packages/org-chart/build.mjs

@@ -30,7 +30,7 @@ execFileSync(process.execPath, [path.resolve(path.dirname(typescriptManifest), t
 // Ship one self-contained public CSS asset. ?url and file:// consumers cannot
 // rely on source-relative imports or a bundler to discover private style files.
 const coreStyles = await readFile(path.join(root, 'src/styles/org-chart.css'), 'utf8');
-const inlinedStyles = await Promise.all(['design-tokens.css', 'employee-card.css', 'summary-sections.css', 'org-chart-content.css', 'org-chart-readonly.css', 'org-chart-p3-summary.css', 'employee-info-dialog.css', 'org-chart-expanded.css'].map(async file => [file, await readFile(path.join(root, 'src/styles', file), 'utf8')]));
+const inlinedStyles = await Promise.all(['design-tokens.css', 'color-presets.css', 'employee-card.css', 'summary-sections.css', 'org-chart-content.css', 'org-chart-readonly.css', 'org-chart-p3-summary.css', 'employee-info-dialog.css', 'org-chart-expanded.css'].map(async file => [file, await readFile(path.join(root, 'src/styles', file), 'utf8')]));
 let publicStyles = coreStyles;
 for (const [file, css] of inlinedStyles) publicStyles = publicStyles.replace(`@import './${file}';`, css);
 await writeFile(path.join(root, 'dist/style.css'), publicStyles);

packages/org-chart/src/core/department-colors.ts

@@ -37,11 +37,11 @@ export function createDepartmentColors(document: Document, context: RenderContex
       ['테두리', 'border', 'current-border', 'background-color', `DESIGN_ADAPTATION: ${preset.borderColor}, 헤더 시작색 재사용; 원본 카드 테두리 NOT VERIFIED`],
       ['Gradient', 'gradient', 'current-gradient', 'background-image', `WORKDESK_COMPUTED: ${preset.backgroundImage}`],
     ];
-    for (const [label, suffix, resolved, property, evidence] of entries) {
+    for (const [label, suffix, , property, evidence] of entries) {
       const term = document.createElement('dt'); term.textContent = label!;
       const detail = document.createElement('dd');
       const swatch = document.createElement('span'); swatch.className = 'hm-orgchart-color-swatch';
-      swatch.style.setProperty(property!, `var(--hm-orgchart-${resolved})`);
+      swatch.classList.add(`hm-orgchart-color-swatch-${suffix}`);
       if (property === 'color') {
         swatch.textContent = 'Aa';
         swatch.style.background = suffix === 'department-color' ? 'var(--hm-orgchart-current-gradient)' : 'var(--hm-orgchart-current-card-background)';

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);

packages/org-chart/src/core/style-presets.ts

@@ -59,18 +59,5 @@ export const organizationStylePresets = [
 export function applyOrganizationStyle(element: HTMLElement, variant: number): void {
   const preset = organizationStylePresets[variant] ?? organizationStylePresets[0];
   element.dataset.groupVariant = String(preset.id);
-  const prefix = preset.variablePrefix;
-  element.style.setProperty('--hm-orgchart-current-card-background',
-    `var(${prefix}-card-background, var(--hm-orgchart-card-background, ${preset.cardBackground}))`);
-  element.style.setProperty('--hm-orgchart-current-card-color',
-    `var(${prefix}-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)))`);
-  element.style.setProperty('--hm-orgchart-current-department-color',
-    `var(${prefix}-department-color, var(--hm-orgchart-department-color, ${preset.departmentColor}))`);
-  element.style.setProperty('--hm-orgchart-current-border',
-    `var(${prefix}-border, var(--hm-orgchart-border, ${preset.borderColor}))`);
-  element.style.setProperty('--hm-orgchart-current-gradient',
-    `var(${prefix}-gradient, var(--hm-orgchart-gradient, ${preset.backgroundImage}))`);
-  // Compatibility aliases remain local to this presentation element.
-  element.style.setProperty('--hm-orgchart-accent', 'var(--hm-orgchart-current-border)');
-  element.style.setProperty('--hm-orgchart-group-background', 'var(--hm-orgchart-current-gradient)');
+  // CSS owns defaults and the cascade; JS only selects the existing preset.
 }

packages/org-chart/src/styles/color-presets.css

@@ -0,0 +1,106 @@
+/* Public inputs remain undeclared so ancestor themes inherit through Shadow DOM.
+   Internal resolved values are declared at their actual presentation scope.
+   Values mirror the approved company/Fixed presets; no JS inline color writes. */
+
+[data-group-variant="0"] {
+  --hm-orgchart-current-card-background: var(--hm-orgchart-business-management-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface)));
+  --hm-orgchart-current-card-color: var(--hm-orgchart-business-management-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)));
+  --hm-orgchart-current-department-color: var(--hm-orgchart-business-management-department-color, var(--hm-orgchart-department-color, #ffffff));
+  --hm-orgchart-current-border: var(--hm-orgchart-business-management-border, var(--hm-orgchart-border, #194d82));
+  --hm-orgchart-current-gradient: var(--hm-orgchart-business-management-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #194d82 0%, #1d395c 100%)));
+  --hm-orgchart-accent: var(--hm-orgchart-current-border);
+  --hm-orgchart-group-background: var(--hm-orgchart-current-gradient);
+}
+
+[data-group-variant="1"] {
+  --hm-orgchart-current-card-background: var(--hm-orgchart-business-planning-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface)));
+  --hm-orgchart-current-card-color: var(--hm-orgchart-business-planning-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)));
+  --hm-orgchart-current-department-color: var(--hm-orgchart-business-planning-department-color, var(--hm-orgchart-department-color, #ffffff));
+  --hm-orgchart-current-border: var(--hm-orgchart-business-planning-border, var(--hm-orgchart-border, #2164a8));
+  --hm-orgchart-current-gradient: var(--hm-orgchart-business-planning-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #2164a8 0%, #254975 100%)));
+  --hm-orgchart-accent: var(--hm-orgchart-current-border);
+  --hm-orgchart-group-background: var(--hm-orgchart-current-gradient);
+}
+
+[data-group-variant="2"] {
+  --hm-orgchart-current-card-background: var(--hm-orgchart-talent-growth-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface)));
+  --hm-orgchart-current-card-color: var(--hm-orgchart-talent-growth-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)));
+  --hm-orgchart-current-department-color: var(--hm-orgchart-talent-growth-department-color, var(--hm-orgchart-department-color, #ffffff));
+  --hm-orgchart-current-border: var(--hm-orgchart-talent-growth-border, var(--hm-orgchart-border, #0f6ace));
+  --hm-orgchart-current-gradient: var(--hm-orgchart-talent-growth-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #0f6ace 0%, #044a94 100%)));
+  --hm-orgchart-accent: var(--hm-orgchart-current-border);
+  --hm-orgchart-group-background: var(--hm-orgchart-current-gradient);
+}
+
+[data-group-variant="3"] {
+  --hm-orgchart-current-card-background: var(--hm-orgchart-integrated-system-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface)));
+  --hm-orgchart-current-card-color: var(--hm-orgchart-integrated-system-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)));
+  --hm-orgchart-current-department-color: var(--hm-orgchart-integrated-system-department-color, var(--hm-orgchart-department-color, #ffffff));
+  --hm-orgchart-current-border: var(--hm-orgchart-integrated-system-border, var(--hm-orgchart-border, #8c67b6));
+  --hm-orgchart-current-gradient: var(--hm-orgchart-integrated-system-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #8c67b6 0%, #5d3494 100%)));
+  --hm-orgchart-accent: var(--hm-orgchart-current-border);
+  --hm-orgchart-group-background: var(--hm-orgchart-current-gradient);
+}
+
+[data-group-variant="4"] {
+  --hm-orgchart-current-card-background: var(--hm-orgchart-design-planning-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface)));
+  --hm-orgchart-current-card-color: var(--hm-orgchart-design-planning-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)));
+  --hm-orgchart-current-department-color: var(--hm-orgchart-design-planning-department-color, var(--hm-orgchart-department-color, #ffffff));
+  --hm-orgchart-current-border: var(--hm-orgchart-design-planning-border, var(--hm-orgchart-border, #09a7a2));
+  --hm-orgchart-current-gradient: var(--hm-orgchart-design-planning-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #09a7a2 0%, #00847f 100%)));
+  --hm-orgchart-accent: var(--hm-orgchart-current-border);
+  --hm-orgchart-group-background: var(--hm-orgchart-current-gradient);
+}
+
+[data-group-variant="5"] {
+  --hm-orgchart-current-card-background: var(--hm-orgchart-solution-sales-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface)));
+  --hm-orgchart-current-card-color: var(--hm-orgchart-solution-sales-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)));
+  --hm-orgchart-current-department-color: var(--hm-orgchart-solution-sales-department-color, var(--hm-orgchart-department-color, #ffffff));
+  --hm-orgchart-current-border: var(--hm-orgchart-solution-sales-border, var(--hm-orgchart-border, #5a963c));
+  --hm-orgchart-current-gradient: var(--hm-orgchart-solution-sales-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #5a963c 0%, #3f7629 100%)));
+  --hm-orgchart-accent: var(--hm-orgchart-current-border);
+  --hm-orgchart-group-background: var(--hm-orgchart-current-gradient);
+}
+
+.hm-orgchart-expanded [data-company-id="hanmac"] {
+  --hm-orgchart-expanded-primary: var(--hm-orgchart-company-hanmac, #CB2E28);
+  --hm-orgchart-expanded-card-primary: var(--hm-orgchart-company-hanmac, #CB2E28);
+  --hm-orgchart-expanded-secondary-1: var(--hm-orgchart-company-hanmac-secondary-1, #1D4289);
+}
+
+.hm-orgchart-expanded [data-company-id="saman"] {
+  --hm-orgchart-expanded-primary: var(--hm-orgchart-company-saman, #F08300);
+  --hm-orgchart-expanded-card-primary: var(--hm-orgchart-company-saman, #F08300);
+  --hm-orgchart-expanded-secondary-1: var(--hm-orgchart-company-saman-secondary-1, #6D6C6C);
+}
+
+.hm-orgchart-expanded [data-company-id="jangheon-industry"] {
+  --hm-orgchart-expanded-primary: var(--hm-orgchart-company-jangheon-industry, #4580A6);
+  --hm-orgchart-expanded-card-primary: var(--hm-orgchart-company-jangheon-industry, #4580A6);
+  --hm-orgchart-expanded-secondary-1: var(--hm-orgchart-company-jangheon-industry-secondary-1, #92BED4);
+}
+
+.hm-orgchart-expanded [data-company-id="jangheon"] {
+  --hm-orgchart-expanded-primary: var(--hm-orgchart-company-jangheon, #1D418D);
+  --hm-orgchart-expanded-card-primary: var(--hm-orgchart-company-jangheon, #1D418D);
+  --hm-orgchart-expanded-secondary-1: var(--hm-orgchart-company-jangheon-secondary-1, #AE232A);
+}
+
+.hm-orgchart-expanded [data-company-id="ptc"] {
+  --hm-orgchart-expanded-primary: var(--hm-orgchart-company-ptc, #84338E);
+  --hm-orgchart-expanded-card-primary: var(--hm-orgchart-company-ptc, #84338E);
+  --hm-orgchart-expanded-secondary-1: var(--hm-orgchart-company-ptc-secondary-1, #F7AF00);
+  --hm-orgchart-expanded-secondary-2: var(--hm-orgchart-company-ptc-secondary-2, #0066B5);
+}
+
+.hm-orgchart-expanded [data-company-id="halla"] {
+  --hm-orgchart-expanded-primary: var(--hm-orgchart-company-halla, #0068B7);
+  --hm-orgchart-expanded-card-primary: var(--hm-orgchart-company-halla, #0068B7);
+  --hm-orgchart-expanded-secondary-1: var(--hm-orgchart-company-halla-secondary-1, #231815);
+}
+
+.hm-orgchart-expanded [data-company-id="baron"] {
+  --hm-orgchart-expanded-primary: var(--hm-orgchart-company-baron, #0C367F);
+  --hm-orgchart-expanded-card-primary: var(--hm-orgchart-company-baron, #0C367F);
+
+}

packages/org-chart/src/styles/employee-card.css

@@ -11,7 +11,7 @@
   min-height: var(--hm-orgchart-resolved-card-height-employee);
   margin: 0;
   padding: 6px;
-  border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-current-border, var(--hm-orgchart-resolved-stroke-default));
+  border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-card-border, var(--hm-orgchart-current-border, var(--hm-orgchart-resolved-stroke-default)));
   border-radius: var(--hm-orgchart-resolved-radius-container);
   background: var(--hm-orgchart-current-card-background, var(--hm-orgchart-resolved-bg-surface));
   color: var(--hm-orgchart-current-card-color, var(--hm-orgchart-resolved-fg-primary));
@@ -37,7 +37,7 @@
   min-height: var(--hm-orgchart-resolved-card-height-leader);
   gap: 8px;
   padding: 8px;
-  border-top: var(--hm-orgchart-resolved-border-top-width) solid var(--hm-orgchart-current-border, var(--hm-orgchart-resolved-action-primary));
+  border-top: var(--hm-orgchart-resolved-border-top-width) solid var(--hm-orgchart-card-accent, var(--hm-orgchart-current-border, var(--hm-orgchart-resolved-action-primary)));
   background: var(--hm-orgchart-current-card-background, var(--hm-orgchart-resolved-bg-content));
 }
 .hm-orgchart-employee[data-card-kind="topLeader"] {
@@ -239,14 +239,14 @@
 .hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name { margin: 0; padding: 0; white-space: nowrap; }
 .hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-has-affiliation="true"] .hm-orgchart-person-role { padding: 0; }
 .hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-role {
-  color: var(--hm-orgchart-person-position-color);
+  color: var(--hm-orgchart-card-position-color, var(--hm-orgchart-person-position-color));
   font-size: var(--hm-orgchart-person-position-size);
   font-weight: 400;
   line-height: var(--hm-orgchart-person-position-line-height);
   letter-spacing: var(--hm-orgchart-person-position-letter-spacing);
 }
 .hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name {
-  color: #071D3A;
+  color: var(--hm-orgchart-card-color, #071D3A);
   font-size: var(--hm-orgchart-person-name-size);
   font-weight: 600;
   line-height: var(--hm-orgchart-person-name-line-height);
@@ -255,7 +255,7 @@
   text-overflow: clip;
 }
 .hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name[data-name-overflow="true"] { text-overflow: ellipsis; }
-.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-person-name { color: #323232; }
+.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-person-name { color: var(--hm-orgchart-card-color, #323232); }
 .hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name:focus-visible { outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus); outline-offset: 1px; }
 .hm-orgchart-employee[data-card-asset-size="employee"] .hm-orgchart-affiliation-mark { top: 2px; right: 1px; width: 20px; height: 20px; min-height: 20px; }
 .hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-affiliation-fallback { font-size: 6px; white-space: nowrap; }

packages/org-chart/src/styles/employee-info-dialog.css

@@ -7,7 +7,7 @@
 .hm-orgchart-organization-link:hover { text-decoration: underline; }
 .hm-orgchart-organization-link:focus-visible,
 .hm-orgchart-employee[role="button"]:focus-visible {
-  outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus);
+  outline: 2px solid var(--hm-orgchart-card-focus-color, var(--hm-orgchart-resolved-stroke-input-focus));
   outline-offset: 3px;
 }
 .hm-orgchart-employee[role="button"] { cursor: pointer; }
@@ -16,10 +16,10 @@
   max-width: calc(100vw - 32px);
   max-height: calc(100dvh - 32px);
   padding: var(--hm-orgchart-resolved-spacing-xxl);
-  border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-stroke-default);
+  border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-dialog-border, var(--hm-orgchart-resolved-stroke-default));
   border-radius: var(--hm-orgchart-resolved-radius-container);
-  background: var(--hm-orgchart-resolved-bg-surface);
-  color: var(--hm-orgchart-resolved-fg-primary);
+  background: var(--hm-orgchart-dialog-background, var(--hm-orgchart-resolved-bg-surface));
+  color: var(--hm-orgchart-dialog-color, var(--hm-orgchart-resolved-fg-primary));
   font: inherit;
   overflow: auto;
 }
@@ -35,9 +35,9 @@
 .hm-orgchart-employee-dialog-close {
   /* Match HM Dialog's ghost / icon-sm Button without a React or theme dependency.
      Fallbacks are the declared HM defaults (theme/default.css and primitives.css). */
-  --hm-orgchart-dialog-close-ink: var(--foreground, var(--hm-sem-fg-primary, #0a221d));
-  --hm-orgchart-dialog-close-hover: var(--muted, var(--hm-sem-bg-subtle, #f4f1ea));
-  --hm-orgchart-dialog-close-ring: var(--ring, var(--hm-sem-stroke-input-focus, #266651));
+  --hm-orgchart-dialog-close-ink: var(--hm-orgchart-dialog-close-color, var(--foreground, var(--hm-sem-fg-primary, #0a221d)));
+  --hm-orgchart-dialog-close-hover: var(--hm-orgchart-dialog-close-hover-background, var(--muted, var(--hm-sem-bg-subtle, #f4f1ea)));
+  --hm-orgchart-dialog-close-ring: var(--hm-orgchart-dialog-focus-color, var(--ring, var(--hm-sem-stroke-input-focus, #266651)));
   position: absolute;
   top: calc(var(--spacing, .25rem) * 2);
   right: calc(var(--spacing, .25rem) * 2);

packages/org-chart/src/styles/org-chart-content.css

@@ -70,7 +70,7 @@
   width: 204px;
   padding: 10px;
   background: var(--hm-orgchart-current-card-background);
-  border-top: var(--hm-orgchart-resolved-border-top-width) solid var(--hm-orgchart-current-border);
+  border-top: var(--hm-orgchart-resolved-border-top-width) solid var(--hm-orgchart-group-border, var(--hm-orgchart-current-border));
 }
 .hm-orgchart-engine.orgchart .node[data-depth="0"] { width: 244px; }
 .hm-orgchart-engine.orgchart .node[data-depth="0"] .hm-orgchart-organization { width: 244px; }
@@ -92,12 +92,12 @@
   margin: 8px 0 0;
   text-align: center;
   border-radius: var(--hm-orgchart-resolved-radius-container);
-  color: var(--hm-orgchart-current-department-color);
+  color: var(--hm-orgchart-group-title-color, var(--hm-orgchart-current-department-color));
 }
 .hm-orgchart-engine.orgchart .node[data-header-role="organization"] .hm-orgchart-organization-name {
   min-height: var(--hm-orgchart-title-height, 40px);
   padding: 6px 12px;
-  background: var(--hm-orgchart-group-background);
+  background: var(--hm-orgchart-group-title-background, var(--hm-orgchart-group-background));
   font-size: var(--hm-orgchart-title-font-size, 18px);
   font-weight: var(--hm-orgchart-resolved-font-weight-bold);
   line-height: var(--hm-orgchart-title-line-height, 26px);
@@ -105,7 +105,7 @@
 .hm-orgchart-engine.orgchart .node[data-header-role="group"] .hm-orgchart-organization-name {
   min-height: var(--hm-orgchart-group-header-height, 32px);
   padding: 4px 8px;
-  background: var(--hm-orgchart-current-border);
+  background: var(--hm-orgchart-group-title-background, var(--hm-orgchart-current-border));
   font-size: var(--hm-orgchart-group-header-font-size, 14px);
   font-weight: var(--hm-orgchart-resolved-font-weight-bold);
   line-height: var(--hm-orgchart-group-header-line-height, 20px);
@@ -131,6 +131,11 @@
 .hm-orgchart-color-legend { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--hm-orgchart-resolved-spacing-sm); }
 .hm-orgchart-color-legend dd { margin: 0; display: grid; gap: 4px; }
 .hm-orgchart-color-swatch { display: block; width: 44px; height: 22px; border: 1px solid var(--hm-orgchart-resolved-stroke-default); }
+.hm-orgchart-color-swatch-card-background { background-color: var(--hm-orgchart-current-card-background); }
+.hm-orgchart-color-swatch-card-color { color: var(--hm-orgchart-current-card-color); }
+.hm-orgchart-color-swatch-department-color { color: var(--hm-orgchart-current-department-color); }
+.hm-orgchart-color-swatch-border { background-color: var(--hm-orgchart-current-border); }
+.hm-orgchart-color-swatch-gradient { background-image: var(--hm-orgchart-current-gradient); }
 .hm-orgchart-color-swatch[data-css-property="color"] { text-align: center; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
 .hm-orgchart-contrast-normal, .hm-orgchart-contrast-candidate, .hm-orgchart-contrast-chip {
   margin: var(--hm-orgchart-resolved-spacing-sm) 0;

packages/org-chart/src/styles/org-chart-expanded.css

@@ -7,7 +7,7 @@
   --hm-orgchart-expanded-employee-gap: var(--hm-orgchart-resolved-spacing-md);
   --hm-orgchart-expanded-line-width: var(--hm-orgchart-resolved-border-width);
   /* Meaningful Auto relationships: separate from neutral card/Fixed borders. */
-  --hm-orgchart-expanded-line-color: #738399;
+  --hm-orgchart-resolved-expanded-line-color: var(--hm-orgchart-expanded-line-color, #738399);
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--hm-orgchart-resolved-spacing-lg);
@@ -71,8 +71,8 @@
   height: auto;
   min-height: 0;
   padding: 0;
-  background: var(--hm-orgchart-expanded-primary);
-  color: #ffffff;
+  background: var(--hm-orgchart-group-title-background, var(--hm-orgchart-expanded-primary));
+  color: var(--hm-orgchart-group-title-color, #ffffff);
   font-size: var(--hm-orgchart-resolved-font-size-base);
   font-weight: var(--hm-orgchart-resolved-font-weight-bold);
   line-height: 1.5;
@@ -90,11 +90,35 @@
 .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"] {
   margin: 0;
   box-sizing: border-box;
-  border: var(--hm-orgchart-expanded-card-border-width, var(--hm-orgchart-resolved-border-width)) solid var(--hm-orgchart-resolved-stroke-default);
-  background: var(--hm-orgchart-resolved-bg-surface);
-  color: var(--hm-orgchart-resolved-fg-primary);
+  border: var(--hm-orgchart-expanded-card-border-width, var(--hm-orgchart-resolved-border-width)) solid var(--hm-orgchart-card-border, var(--hm-orgchart-resolved-stroke-default));
+  background: var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface));
+  color: var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary));
 }
 .hm-orgchart-expanded .hm-orgchart-employee[data-card-presentation="expanded"]::before { content: none; }
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-kind="leader"] {
+  background: var(--hm-orgchart-leader-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface)));
+}
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-kind="topLeader"] {
+  background: var(--hm-orgchart-top-leader-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface)));
+}
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-work-status="dispatched"] {
+  --hm-orgchart-resolved-status-card-background: var(--hm-orgchart-dispatched-card-gradient, var(--hm-orgchart-resolved-role-card-background));
+  background: var(--hm-orgchart-resolved-status-card-background);
+  border-color: var(--hm-orgchart-dispatched-card-border, var(--hm-orgchart-card-border, var(--hm-orgchart-resolved-stroke-default)));
+  color: var(--hm-orgchart-dispatched-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)));
+}
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-work-status="onLeave"] {
+  --hm-orgchart-resolved-status-card-background: var(--hm-orgchart-on-leave-card-gradient, var(--hm-orgchart-resolved-role-card-background));
+  background: var(--hm-orgchart-resolved-status-card-background);
+  border-color: var(--hm-orgchart-on-leave-card-border, var(--hm-orgchart-card-border, var(--hm-orgchart-resolved-stroke-default)));
+  color: var(--hm-orgchart-on-leave-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)));
+}
+.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"]:hover {
+  background: var(--hm-orgchart-card-hover-background, var(--hm-orgchart-resolved-status-card-background, var(--hm-orgchart-resolved-role-card-background)));
+}
+.hm-orgchart-expanded .hm-orgchart-employee[data-card-kind="employee"] { --hm-orgchart-resolved-role-card-background: var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface)); }
+.hm-orgchart-expanded .hm-orgchart-employee[data-card-kind="leader"] { --hm-orgchart-resolved-role-card-background: var(--hm-orgchart-leader-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))); }
+.hm-orgchart-expanded .hm-orgchart-employee[data-card-kind="topLeader"] { --hm-orgchart-resolved-role-card-background: var(--hm-orgchart-top-leader-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))); }
 .hm-orgchart-expanded .hm-orgchart-employee[data-card-presentation="expanded"] .hm-orgchart-avatar { border-radius: 0; }
 .hm-orgchart-expanded .hm-orgchart-person-text { display: flex; flex-direction: column; gap: 0; }
 .hm-orgchart-expanded .hm-orgchart-employee::after { content: none; }
@@ -106,7 +130,7 @@
   width: 100%;
   height: 0;
   border-width: var(--hm-orgchart-expanded-line-width) 0 0;
-  border-color: var(--hm-orgchart-expanded-line-color);
+  border-color: var(--hm-orgchart-resolved-expanded-line-color);
 }
 .hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes > .hierarchy:first-child::before { left: calc(50% - 1px); width: calc(50% + 1px); }
 .hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes > .hierarchy:last-child::before { width: calc(50% + 1px); }
@@ -115,13 +139,13 @@
   top: calc(-1 * var(--hm-orgchart-expanded-level-gap) / 2);
   height: calc(var(--hm-orgchart-expanded-level-gap) / 2);
   width: var(--hm-orgchart-expanded-line-width);
-  background-color: var(--hm-orgchart-expanded-line-color);
+  background-color: var(--hm-orgchart-resolved-expanded-line-color);
 }
 .hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after {
   bottom: calc(-1 * var(--hm-orgchart-expanded-level-gap) / 2);
   height: calc(100% - var(--hm-orgchart-expanded-content-height) + var(--hm-orgchart-expanded-level-gap) / 2);
   width: var(--hm-orgchart-expanded-line-width);
-  background-color: var(--hm-orgchart-expanded-line-color);
+  background-color: var(--hm-orgchart-resolved-expanded-line-color);
 }
 
 /* Standalone content variables, independent of Fixed and HM React controls. */
@@ -171,7 +195,7 @@
   padding-inline: var(--hm-orgchart-resolved-spacing-xxl);
 }
 .hm-orgchart-expanded .hm-orgchart-employee-connectors { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
-.hm-orgchart-expanded .hm-orgchart-employee-connectors path { fill: none; stroke: var(--hm-orgchart-expanded-line-color); stroke-width: var(--hm-orgchart-expanded-line-width); }
+.hm-orgchart-expanded .hm-orgchart-employee-connectors path { fill: none; stroke: var(--hm-orgchart-resolved-expanded-line-color); stroke-width: var(--hm-orgchart-expanded-line-width); }
 .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"] {
   padding: var(--hm-orgchart-expanded-card-padding);
   border-radius: var(--hm-orgchart-expanded-card-radius);
@@ -185,16 +209,16 @@
 }
 /* Inset accents preserve all outer dimensions even when accent width changes. */
 .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"][data-connection-direction="top"] {
-  box-shadow: inset 0 var(--hm-orgchart-expanded-card-accent-width) 0 var(--hm-orgchart-expanded-card-primary);
-  border-top-color: var(--hm-orgchart-expanded-card-primary);
+  box-shadow: inset 0 var(--hm-orgchart-expanded-card-accent-width) 0 var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary));
+  border-top-color: var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary));
 }
 .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"][data-connection-direction="left"] {
-  box-shadow: inset var(--hm-orgchart-expanded-card-accent-width) 0 0 var(--hm-orgchart-expanded-card-primary);
-  border-left-color: var(--hm-orgchart-expanded-card-primary);
+  box-shadow: inset var(--hm-orgchart-expanded-card-accent-width) 0 0 var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary));
+  border-left-color: var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary));
 }
 .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-card-presentation="expanded"][data-connection-direction="right"] {
-  box-shadow: inset calc(-1 * var(--hm-orgchart-expanded-card-accent-width)) 0 0 var(--hm-orgchart-expanded-card-primary);
-  border-right-color: var(--hm-orgchart-expanded-card-primary);
+  box-shadow: inset calc(-1 * var(--hm-orgchart-expanded-card-accent-width)) 0 0 var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary));
+  border-right-color: var(--hm-orgchart-card-accent, var(--hm-orgchart-expanded-card-primary));
 }
 .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee .hm-orgchart-avatar {
   width: var(--hm-orgchart-expanded-photo-size); height: var(--hm-orgchart-expanded-photo-size); flex-basis: var(--hm-orgchart-expanded-photo-size);
@@ -258,7 +282,7 @@
   position: absolute; inset: 0; overflow: visible; pointer-events: none;
 }
 .hm-orgchart-expanded .hm-orgchart-organization-connectors path {
-  fill: none; stroke: var(--hm-orgchart-expanded-line-color); stroke-width: var(--hm-orgchart-expanded-line-width);
+  fill: none; stroke: var(--hm-orgchart-resolved-expanded-line-color); stroke-width: var(--hm-orgchart-expanded-line-width);
 }
 
 /* P9.3: outlines do not resize cards or replace company accents/connectors. */

packages/org-chart/src/styles/org-chart-readonly.css

@@ -7,7 +7,7 @@
   --hm-orgchart-group-title-font-size: 20px;
   --hm-orgchart-group-title-font-weight: 700;
   --hm-orgchart-group-title-line-height: 19.7px;
-  background: #F5F8FB;
+  background: var(--hm-orgchart-bg-content, #F5F8FB);
 }
 .hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage {
   position: relative;
@@ -26,7 +26,7 @@
   min-width: 1920px;
   min-height: 914.5px;
   padding: 12px 0;
-  background: #F5F8FB;
+  background: var(--hm-orgchart-bg-content, #F5F8FB);
 }
 .hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-heading { grid-area: heading; justify-self: start; align-self: start; max-width: calc(100% - 52px - 96px); margin: 0 0 0 52px; }
 .hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-title { font-size: 32px; line-height: 40px; letter-spacing: -0.5px; }
@@ -121,7 +121,7 @@
   min-width: 114px;
   min-height: 30.4px;
   padding: 0;
-  background: var(--hm-orgchart-current-gradient);
+  background: var(--hm-orgchart-group-title-background, var(--hm-orgchart-current-gradient));
   border-radius: 7.1px;
   box-shadow: 0 3.6px 8px rgba(45, 73, 104, 0.2);
   font-size: var(--hm-orgchart-group-title-font-size);
@@ -201,6 +201,8 @@
 /* Keep the logo above the unchanged position row. */
 .hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-employee[data-card-asset-size="leader"] .hm-orgchart-affiliation-mark { top: 0; }
 .hm-orgchart-workdesk-overlay { position: absolute; inset: 0; width: 1920px; height: 914.5px; z-index: 4; pointer-events: none; }
+.hm-orgchart-workdesk-overlay path[data-connector] { stroke: var(--hm-orgchart-fixed-line-color, #45639F); }
+.hm-orgchart-workdesk-overlay path[data-arrow-head] { fill: var(--hm-orgchart-fixed-line-color, #45639F); }
 .hm-orgchart-workdesk-decoration { position: absolute; z-index: 0; pointer-events: none; user-select: none; object-fit: contain; }
 .hm-orgchart-workdesk-ring { top: 0; left: 50%; width: 1757px; height: 901px; translate: -50% 0; mix-blend-mode: multiply; }
 .hm-orgchart-workdesk-sky { inset: 0; width: 100%; height: 100%; object-position: top center; opacity: 0.1; }
@@ -270,7 +272,7 @@
   min-height: 24px;
   margin: 0;
   border-radius: var(--hm-orgchart-resolved-radius-container);
-  color: var(--hm-orgchart-resolved-on-action-primary);
+  color: var(--hm-orgchart-status-title-color, var(--hm-orgchart-resolved-on-action-primary));
   font-size: var(--hm-orgchart-group-title-font-size);
   font-weight: var(--hm-orgchart-group-title-font-weight);
   line-height: var(--hm-orgchart-group-title-line-height);

packages/org-chart/src/styles/org-chart.css

@@ -1,4 +1,5 @@
 @import './design-tokens.css';
+@import './color-presets.css';
 @import './employee-card.css';
 @import './summary-sections.css';
 @import './org-chart-content.css';
@@ -25,9 +26,9 @@
 .hm-orgchart-engine.orgchart .node:hover, .hm-orgchart-engine.orgchart .node.focused { background: none; }
 .hm-orgchart-engine.orgchart .node .edge { display: none; }
 .hm-orgchart-engine.orgchart .hierarchy { text-align: center; }
-.hm-orgchart-engine.orgchart .hierarchy::before { border-color: var(--hm-orgchart-resolved-stroke-default); }
-.hm-orgchart-engine.orgchart > ul > li > ul li > .node::before { background-color: var(--hm-orgchart-resolved-stroke-default); }
-.hm-orgchart-engine.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after { background-color: var(--hm-orgchart-resolved-stroke-default); }
+.hm-orgchart-engine.orgchart .hierarchy::before { border-color: var(--hm-orgchart-fixed-line-color, var(--hm-orgchart-resolved-stroke-default)); }
+.hm-orgchart-engine.orgchart > ul > li > ul li > .node::before { background-color: var(--hm-orgchart-fixed-line-color, var(--hm-orgchart-resolved-stroke-default)); }
+.hm-orgchart-engine.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after { background-color: var(--hm-orgchart-fixed-line-color, var(--hm-orgchart-resolved-stroke-default)); }
 .hm-orgchart-organization { width: 244px; padding: 12px; border: 1px solid var(--hm-orgchart-resolved-stroke-default); border-radius: var(--hm-orgchart-resolved-radius-container); background: var(--hm-orgchart-resolved-bg-surface); }
 .hm-orgchart-kind { display: block; font-size: 11px; color: var(--hm-orgchart-resolved-fg-secondary); }
 .hm-orgchart-organization-name { margin: 2px 0 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }

packages/org-chart/src/styles/summary-sections.css

@@ -124,18 +124,31 @@
 .hm-orgchart-status-employees { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
 .hm-orgchart-status-employees .hm-orgchart-employee { margin-top: 0; }
 .hm-orgchart-status-group > .hm-orgchart-summary-title {
-  background: linear-gradient(180deg, #87909c 0%, #68727e 100%);
-  border: 1px solid rgba(92, 101, 112, 0.52);
+  background: var(--hm-orgchart-resolved-status-title-background);
+  color: var(--hm-orgchart-status-title-color, var(--hm-orgchart-resolved-fg-primary));
+  border: 1px solid var(--hm-orgchart-status-title-border, rgba(92, 101, 112, 0.52));
   box-shadow: 0 7px 16px rgba(75, 84, 96, 0.18);
 }
 .hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] {
   margin: 0;
-  background-image: linear-gradient(180deg, #f4f5f6 0%, #dfe3e7 100%) !important;
-  border: 1px solid rgba(120, 130, 142, 0.35);
+  background-image: var(--hm-orgchart-resolved-status-card-gradient);
+  border: 1px solid var(--hm-orgchart-resolved-status-card-border);
   border-radius: var(--br-3_5, var(--hm-orgchart-resolved-radius-container));
   cursor: pointer;
 }
-.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] .hm-orgchart-person-role { color: #555f6a; }
-.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] .hm-orgchart-person-name { color: #3e4650; }
+.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] .hm-orgchart-person-role { color: var(--hm-orgchart-status-position-color, #555f6a); }
+.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] .hm-orgchart-person-name { color: var(--hm-orgchart-resolved-status-card-color); }
+.hm-orgchart-status-group[data-work-status="dispatched"] {
+  --hm-orgchart-resolved-status-title-background: var(--hm-orgchart-dispatched-title-background, var(--hm-orgchart-status-title-background, linear-gradient(180deg, #87909c 0%, #68727e 100%)));
+  --hm-orgchart-resolved-status-card-gradient: var(--hm-orgchart-dispatched-card-gradient, var(--hm-orgchart-status-card-gradient, linear-gradient(180deg, #f4f5f6 0%, #dfe3e7 100%)));
+  --hm-orgchart-resolved-status-card-border: var(--hm-orgchart-dispatched-card-border, var(--hm-orgchart-status-card-border, rgba(120, 130, 142, 0.35)));
+  --hm-orgchart-resolved-status-card-color: var(--hm-orgchart-dispatched-card-color, var(--hm-orgchart-status-card-color, #3e4650));
+}
+.hm-orgchart-status-group[data-work-status="onLeave"] {
+  --hm-orgchart-resolved-status-title-background: var(--hm-orgchart-on-leave-title-background, var(--hm-orgchart-status-title-background, linear-gradient(180deg, #87909c 0%, #68727e 100%)));
+  --hm-orgchart-resolved-status-card-gradient: var(--hm-orgchart-on-leave-card-gradient, var(--hm-orgchart-status-card-gradient, linear-gradient(180deg, #f4f5f6 0%, #dfe3e7 100%)));
+  --hm-orgchart-resolved-status-card-border: var(--hm-orgchart-on-leave-card-border, var(--hm-orgchart-status-card-border, rgba(120, 130, 142, 0.35)));
+  --hm-orgchart-resolved-status-card-color: var(--hm-orgchart-on-leave-card-color, var(--hm-orgchart-status-card-color, #3e4650));
+}
 .hm-orgchart-status-group .hm-orgchart-affiliation-mark img { filter: grayscale(1); opacity: 0.72; }
 .hm-orgchart-content-empty { margin: 8px 0; color: var(--hm-orgchart-resolved-fg-secondary); font-size: 12px; }