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/employee-card.css
+5 -5
View File
@@ -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; }