Files
HMDesign/packages/org-chart/src/styles/design-tokens.css
T

69 lines
5.9 KiB
CSS

/* Standalone OrgChart design defaults. No HM Theme dependency.
Only the six organization header gradients were measured in Workdesk.
Neutral surfaces, card styling, typography and geometry are independent
design adaptations, not verified official Workdesk values.
Public --hm-orgchart-* inputs are intentionally NOT declared here: host
overrides must inherit through the Shadow DOM. Resolve defaults locally. */
.hm-orgchart-shell {
--hm-orgchart-resolved-bg-surface: var(--hm-orgchart-bg-surface, #ffffff);
--hm-orgchart-resolved-bg-content: var(--hm-orgchart-bg-content, #f4f7fb);
--hm-orgchart-resolved-bg-subtle: var(--hm-orgchart-bg-subtle, #e9edf3);
--hm-orgchart-resolved-bg-brand: var(--hm-orgchart-bg-brand, linear-gradient(180deg, #45639f 0%, #809dd7 100%));
--hm-orgchart-resolved-fg-primary: var(--hm-orgchart-fg-primary, #10243b);
--hm-orgchart-resolved-fg-secondary: var(--hm-orgchart-fg-secondary, #596575);
--hm-orgchart-resolved-stroke-default: var(--hm-orgchart-stroke-default, #bac7d7);
--hm-orgchart-resolved-stroke-input-default: var(--hm-orgchart-stroke-input-default, #d3dce8);
--hm-orgchart-resolved-stroke-input-focus: var(--hm-orgchart-stroke-input-focus, #45639f);
--hm-orgchart-resolved-accent: var(--hm-orgchart-accent-color, #eef2fa);
--hm-orgchart-resolved-on-accent: var(--hm-orgchart-on-accent, #224387);
--hm-orgchart-resolved-action-primary: var(--hm-orgchart-action-primary, #45639f);
--hm-orgchart-resolved-on-action-primary: var(--hm-orgchart-on-action-primary, #ffffff);
--hm-orgchart-resolved-font-family: var(--hm-orgchart-font-family, 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif);
--hm-orgchart-resolved-font-weight-bold: var(--hm-orgchart-font-weight-bold, 700);
--hm-orgchart-resolved-font-weight-medium: var(--hm-orgchart-font-weight-medium, 500);
--hm-orgchart-resolved-radius-container: var(--hm-orgchart-radius-container, 4px);
--hm-orgchart-resolved-radius-control-md: var(--hm-orgchart-radius-control-md, 4px);
--hm-orgchart-resolved-radius-pill: var(--hm-orgchart-radius-pill, 999px);
--hm-orgchart-resolved-spacing-xs: var(--hm-orgchart-spacing-xs, 4px);
--hm-orgchart-resolved-spacing-sm: var(--hm-orgchart-spacing-sm, 8px);
--hm-orgchart-resolved-spacing-md: var(--hm-orgchart-spacing-md, 12px);
--hm-orgchart-resolved-spacing-lg: var(--hm-orgchart-spacing-lg, 16px);
--hm-orgchart-resolved-spacing-xl: var(--hm-orgchart-spacing-xl, 20px);
--hm-orgchart-resolved-spacing-xxl: var(--hm-orgchart-spacing-xxl, 24px);
--hm-orgchart-resolved-border-width: var(--hm-orgchart-border-width, 1px);
--hm-orgchart-resolved-border-top-width: var(--hm-orgchart-border-top-width, 3px);
--hm-orgchart-resolved-font-size-title: var(--hm-orgchart-font-size-title, 24px);
--hm-orgchart-resolved-font-size-base: var(--hm-orgchart-font-size-base, 13px);
--hm-orgchart-resolved-font-size-person: var(--hm-orgchart-font-size-person, 13px);
--hm-orgchart-resolved-font-size-meta: var(--hm-orgchart-font-size-meta, 10px);
--hm-orgchart-resolved-card-width-employee: var(--hm-orgchart-card-width-employee, 114px);
--hm-orgchart-resolved-card-width-leader: var(--hm-orgchart-card-width-leader, 154px);
--hm-orgchart-resolved-card-width-top-leader: var(--hm-orgchart-card-width-top-leader, 155px);
--hm-orgchart-resolved-card-height-employee: var(--hm-orgchart-card-height-employee, 54px);
--hm-orgchart-resolved-card-height-leader: var(--hm-orgchart-card-height-leader, 72px);
--hm-orgchart-resolved-card-height-top-leader: var(--hm-orgchart-card-height-top-leader, 78px);
--hm-orgchart-resolved-table-background: var(--hm-orgchart-table-background, var(--hm-orgchart-resolved-bg-surface));
--hm-orgchart-resolved-table-text: var(--hm-orgchart-table-text, var(--hm-orgchart-resolved-fg-primary));
--hm-orgchart-resolved-table-font-size: var(--hm-orgchart-table-font-size, 12px);
--hm-orgchart-resolved-table-line-height: var(--hm-orgchart-table-line-height, 18px);
--hm-orgchart-resolved-table-cell-padding-x: var(--hm-orgchart-table-cell-padding-x, 8px);
--hm-orgchart-resolved-table-cell-padding-y: var(--hm-orgchart-table-cell-padding-y, 6px);
--hm-orgchart-resolved-table-divider-color: var(--hm-orgchart-table-divider-color, var(--hm-orgchart-resolved-stroke-input-default));
--hm-orgchart-resolved-table-divider-width: var(--hm-orgchart-table-divider-width, var(--hm-orgchart-resolved-border-width));
--hm-orgchart-resolved-table-header-background: var(--hm-orgchart-table-header-background, #edf2f8);
--hm-orgchart-resolved-table-header-text: var(--hm-orgchart-table-header-text, #224387);
--hm-orgchart-resolved-table-header-font-size: var(--hm-orgchart-table-header-font-size, 12px);
--hm-orgchart-resolved-table-header-font-weight: var(--hm-orgchart-table-header-font-weight, var(--hm-orgchart-resolved-font-weight-bold));
--hm-orgchart-resolved-table-header-border-top: var(--hm-orgchart-table-header-border-top, var(--hm-orgchart-resolved-stroke-input-focus));
--hm-orgchart-resolved-table-header-border-bottom: var(--hm-orgchart-table-header-border-bottom, var(--hm-orgchart-resolved-stroke-input-default));
--hm-orgchart-resolved-table-row-hover-background: var(--hm-orgchart-table-row-hover-background, var(--hm-orgchart-resolved-bg-content));
--hm-orgchart-resolved-table-footer-background: var(--hm-orgchart-table-footer-background, var(--hm-orgchart-resolved-bg-subtle));
--hm-orgchart-resolved-table-footer-font-weight: var(--hm-orgchart-table-footer-font-weight, var(--hm-orgchart-resolved-font-weight-medium));
--hm-orgchart-resolved-table-caption-color: var(--hm-orgchart-table-caption-color, var(--hm-orgchart-resolved-fg-secondary));
--hm-orgchart-resolved-table-caption-font-size: var(--hm-orgchart-table-caption-font-size, 11px);
--hm-orgchart-resolved-table-caption-line-height: var(--hm-orgchart-table-caption-line-height, 16px);
--hm-orgchart-resolved-table-caption-gap: var(--hm-orgchart-table-caption-gap, 8px);
}