shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

fix(org-chart): improve auto connector contrast and test portability

Browse Source
This commit is contained in:
shkim4 committed 2026-10-12 22:54:15 +09:00
1 parent d2b76e7664
commit 7644520cee
21 files changed
+109 -61
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/org-chart/src/styles/org-chart-expanded.css
+6 -1
View File
@@ -6,6 +6,8 @@
--hm-orgchart-expanded-title-gap: var(--hm-orgchart-resolved-spacing-md);
--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;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--hm-orgchart-resolved-spacing-lg);
@@ -101,6 +103,7 @@
width: 100%;
height: 0;
border-width: var(--hm-orgchart-expanded-line-width) 0 0;
border-color: var(--hm-orgchart-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); }
@@ -109,11 +112,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);
}
.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);
}
/* Standalone content variables, independent of Fixed and HM React controls. */
@@ -162,7 +167,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-resolved-stroke-default); stroke-width: var(--hm-orgchart-expanded-line-width); }
.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-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);