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

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

Browse Source
This commit is contained in:
shkim4 committed 2026-10-13 22:43:21 +09:00
1 parent dcfa4e0895
commit 346c648c09
27 files changed
+1189 -75
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
+41 -17
View File
@@ -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. */