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/summary-sections.css
+19 -6
View File
@@ -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; }