59 KiB
59 KiB
HMDesign OrgChart P11.1 — 최종 정합성 검증
RESULT: PASS — 요청 범위의 문서·공개 API·CSS·Storybook 정합성 및 Feature Commit 조건 충족. 이 보고서는 Commit 전 검증 기록이며 최종 Commit/Push SHA·원격 일치·Working Tree 결과는 작업 최종 응답에 기록한다. main 병합·배포·최종 디자인 승인 완료를 뜻하지 않는다.
1. 검사 기준과 범위
| 항목 | 확인값 |
|---|---|
| 작업 경로 | D:\디자인시스템\HMDesign-OrgChart-Recovered |
| 브랜치 | feature/orgchart-package |
| 검사 기준 HEAD / 시작 원격 Feature | dcfa4e0895eecc97ce516cbf3d4424bbaadfddeb |
| 시작 원격 main | c45d63a03b84eaac43f01bd400a16488a80e4229 |
| origin | https://gitea.hmac.kr/b25027/HMDesign.git |
| 작성자 | b25027 <shkim4@samaneng.com> |
| 시작 변경 | P11 정상 산출물 26개, staged 0. P11 보고서의 목록과 일치 |
| P11.1 추가 변경 | 사용 가이드의 문서 오류 보완 및 이 보고서 1개. 제품·공개 타입·Story 소스 변경 0 |
| 최종 Stage 후보 | P11 26개 + 이 보고서 = 27개. 임시 로그·캡처·dist·node_modules는 Git ignored이며 제외 |
이번 작업의 명시적 경로·Feature Commit/Push 지시를 공통 지침의 공식 경로/main 지시보다 우선했다. main Checkout/Merge/Push, PR, Registry Publish, Docker, 배포, 다른 Worktree 정리, Reset/Rebase/Force Push를 수행하지 않는다.
2. 정합성 결과표
| 검사 대상 | 문서 | 실제 코드 | Storybook | 결과 |
|---|---|---|---|---|
| Core 공개 API | 가이드 import·옵션·Handle 대조 | manifest/공개 export/구현/.d.ts 확인 |
Full/Expanded 렌더·대표 동작 | PASS |
| React Wrapper | 기본/HM Entry·Props·Adapter 대조 | optional peer, 타입 상속·설정 전달 확인 | Full/Expanded React 19 렌더 | PASS |
| Chart Only | 기본 fit/direct·Fixed 거부·UI 제외 대조 | Core 기본 분기·viewport·wrapper 전달 확인 | 별도 React/Vanilla 화면 | PASS |
| 외부 CSS 테마 | 이름·적용 범위·우선순위 수정 | CSS 선언/사용 추출, 예제 입력 39개 연결 | React/Vanilla 테마 대표 화면 | PASS |
| HMDesign Dialog | 별도 HM Theme/Portal 범위 대조 | /hm-dialog 및 HMEmployeeDialog 확인 |
Expanded Dialog·ESC·focus 복귀 | PASS |
| 회사별 컬러 | 7개 회사색/secondary 입력 대조 | TS 프리셋과 CSS fallback 일치 | Expanded 실제 computed 7색 | PASS |
| Fixed 디자인 | 6개 부서색·SVG/PNG 한계 대조 | 기존 자산·구성 보존 | Full/Department/Overview | PASS |
| AI 생성 정책 | 사전 선택·가변 구조·원본 보존 | enum/parentId 트리·회사 경계 대조 | 기존 Story 비소급 범위 확인 | PASS(정적 정책) |
| Guard 토큰 | P10 원본/P11 현재 결과 구분 | 실제 재검사 FAIL 0, 규칙 비활성화 없음 | 실제 theme 렌더는 별도 증거 | PASS(정적), Runtime NOT VERIFIED |
Core 공개 export는 createOrgChart, DataSource/Validator/집계/이동 함수와 독립 presenter이며 새 API를 만들지 않았다. layoutMode는 Fixed/Auto, autoLayout.type은 TB/LR/Hybrid다. Auto의 Zoom/Pan/Fit·접기·편집·직원 팝업은 기존 구현을 사용하며 CSV/XLSX parser, 공개 collapse setter, React imperative ref, 서버 저장 API는 없다. JSON 최소/깊은 예제 및 필수·nullable 필드는 현재 data/types.ts·Validator와 일치한다.
React 기본 Entry는 Core lifecycle·Props만 사용하고 HM UI를 import하지 않는다. @hm-design/ui peer는 optional, React peer는 ^19.0.0이며 현재 19.3.0에서 렌더링했다. 선택 Entry /hm-dialog는 기존 HM UI Dialog를 제공하며 employeePopup="hm-dialog"를 명시해야 한다. employeePopupAdapter도 모드를 함께 지정한다. Fixed는 기존 Core 팝업/onEmployeeClick 경계를 유지한다. HM UI 없는 fresh install은 기존 최소 설치 증거를 재사용했고 이번에 다시 설치하지 않았다.
3. 공개 화면과 Chart Only
공개 index에는 OrgChart/Overview, Department Colors, Full Composition, Expanded OrgChart 4개가 그대로 있다. ID는 각각 orgchart--logo-personnel-summary, orgchart--department-colors, orgchart--full-composition, orgchart--expanded-org-chart다. OrgChart는 최상위 그룹이며 Components/Patterns와 같은 Depth다. 신규 Story 등록·기존 ID/URL 교체 없음.
| 화면 | 실제 확인 |
|---|---|
| Overview | 로고 legend 7개, 중복 내부 h2 없음, 동일 data-p1.json Core 집계/표·하단 관계사 총계 41명. 하단 집계에 반복된 회사 로고를 legend 수에 더하지 않음 |
| Department Colors | 대표자·그룹장·직원, 6개 서로 다른 기존 gradient, 모든 직원 이름 홍 길 동, 파견/휴직 preview. 기존 카드·Typography 캡처 확인, Cell Border Only 미적용 |
| Full Composition | 대표자·화살촉 1개·협업 PNG 화살표 5개·중앙 구성·상단 제목/인원표·하단 파견/휴직·관계사 현황·팝업 X/카드 focus 복귀 확인. 390px 반응형/내부 스크롤 판정은 P10.10 재사용, 새 수정 사유 없음 |
| Expanded OrgChart | 최초 7회사×20=140명, 회사 선택, 한맥기술 단독 20/100/300명 실제 카드 수, 300명 TB/LR/Hybrid 유지, 7회사 기본 computed 색, 기본 D&D OFF, ON의 직원/그룹 소속 이동(키보드 편집 경로)·300명 보존, OFF Pan, HM Dialog ESC/focus 복귀, 기존 Zoom/Fit 컨트롤 유지 |
| React/Vanilla Chart Only | 기본 흰 캔버스, 외부 heading/selection/toolbar 없음, 전체 실제 Bounds 초기 Fit/가로·세로 중앙, 직접 wheel·커서 기준 anchor, 직원 Core 팝업, 접기/재확장 확인. Fit은 빈 engine wrapper 여백 대신 실제 조직/조직 연결 path bounds로 측정 |
Chart Only는 layoutMode='auto' + presentationMode='chart-only', 기본 initialView='fit' / wheelZoom='direct'다. 기본 Expanded에는 이 모드를 전달하지 않아 기존 제목·요약·툴바 및 modifier wheel 정책을 유지한다. Fixed Chart Only는 Core TypeError 경로로 명시적 미지원이다. React와 Vanilla는 같은 Core 설정을 사용하며 호스트가 캔버스 크기를 제공한다. P11 React fixture의 host 높이 미지정 fallback 320px와 Vanilla의 850px 컨테이너를 동일 크기라고 보고하지 않는다.
신규 대표 검사: 최초 16개 중 10 PASS/6 FAIL. 소스 대조 후 실패 6개만 보정해 6/6 PASS + 재검사 오류 0. 최초 결과를 보존한다. 원인은 logo legend와 하단 반복 로고 합산, 3종류 composition region의 6개 slot을 3개 element로 예상, Fit의 engine wrapper 여백 포함, 상태 gradient 카드에 일반 active 카드 backgroundColor 기대였다. 제품 버그나 신규 제품 변경은 없었다.
현재 캡처를 확인한 공개 Story 4개는 렌더 PASS다. 기존 Story 전체의 변경 전후 픽셀 동일성이나 사용자의 최종 디자인 승인을 뜻하지 않는다. 순수 pointer D&D의 모든 조합은 이번에 재실행하지 않았으며 키보드 편집은 실제 ON의 공통 validation/engine drop/move 경로를 사용했다.
4. CSS 변수·연결·기본값
실제 PostCSS AST에서 532개 변수 선언/사용 위치를 추출했다. P11 tracked CSS 변경에 나타난 66개 이름과 신규 color-presets.css를 합치면 116개이며, 관련 기존 공통 컬러 입력 12개를 더해 부록에 128개 이름을 기록했다. 128개가 모두 신규 공개 변수라는 뜻은 아니다. 공개 입력, 기존 입력, 내부 resolved/current alias·geometry를 구분했다. 예제 CSS 3개의 서로 다른 공개 입력 39개는 모두 실제 var(...) 사용 경로가 있으며 가상의 이름은 없다.
- 공개 입력은 상속을 위해 내부에 고정 선언하지 않는다. 기본값은 해당 scope의 소비 표현식 fallback에 있다. 내부 선언·default·selector/적용 속성은 부록에 기록한다. React/Vanilla는 같은 Core CSS를 사용하므로 모든 행의 CSS 적용 경로가 공통이다.
- 회사 ID primary 7개 기본값은 변경하지 않았다. 보조 입력은 6회사 secondary-1과 ptc secondary-2만 연결되고 baron 보조 입력은 없다. 보조 alias를 주요 카드/제목의 추가 컬러 역할로 오인하지 않는다.
- Fixed 6부서의 gradient/Border/default는 기존 TS 프리셋과 일치한다. 공통 그룹 배경은 회사/부서 제목 배경보다 우선한다. 부서별 배경·fallback 텍스트와 공통 Border·compact HTML 이름의 우선순위 차이를 문서에 보완했다.
- 파견/휴직 Fixed 요약 gradient·Border·텍스트와 Auto 상태 카드 gradient·Border·텍스트를 구분한다. Fixed
*-gradient는background-image에 연결하므로 CSS image 표현식이 필요하다. 단색 CSS color를 그 입력에 넣는다고 일반 배경값과 동일하게 적용되지 않는다. - Core dialog 배경/글자/Border, 닫기 Hover/Focus는 Core 내부 입력이다.
/hm-dialog는 Shadow 밖 HM Theme/Portal이며 자동 동기화하지 않는다.
stylesheetUrls.core는 기본 CSS 전체를 포함한 URL 하나다. 기본 CSS @import 뒤에 :host override를 두며 engine→core 순서로 Shadow link를 로드한다. Vite는 공개 CSS/외부 CSS의 ?url, HTTP ESM 소비자는 실제 서빙 URL을 사용한다. 변수 전용 host CSS는 document에 연결하고 class로 상속한다. 일반 host selector가 Shadow 내부를 통과하지 않는다.
Shadow :host의 직접 지정값이 조상 상속보다 우선하며 소비자가 같은 입력을 inline 지정하면 해당 inline이 우선한다. P11 Core의 회사·부서 기본색 inline setProperty는 제거됐고 dataset에 따른 CSS 해석으로 바뀌었다. setProperty 자체를 새 테마 API로 문서화하거나 Guard 자동 승인에 사용하지 않았다. 호스트 class 제거의 기본값 복원과 배율 보존, React/Vanilla 외부 테마·팝업·Hover/Focus·4폭은 P11 104/104 PASS 증거를 재사용했다. 이번 대표 테마 검사는 두 runtime의 회사 제목·active 카드·연결선·상태 gradient·Core 팝업을 추가 확인했다.
Fixed SVG/PNG 내부 색상은 CSS 변수로 바뀌지 않는다. 실제 inline SVG overlay 연결선은 CSS로 변경되지만 이미지 화살표·로고·배경·카드 SVG 불투명 영역은 그대로다. 외부 Theme 기능은 삼안/장헌산업 흰 제목 대비나 보안 Advisory를 자동 해결하지 않는다.
5. 문서 보완과 예제 검증
| 발견된 문서 불일치 | 최소 수정 |
|---|---|
| 하단 제한에 잔여 Guard FAIL 5건이 현재 상태처럼 기재 | P10 당시 기록과 P11 실제 FAIL 0건을 분리, 원본 보고서 링크 보존 |
| 외부 CSS 테마 표준화가 현재 미포함처럼 기재 | P11 지원과 Fixed 이미지/Chart Only 미지원을 분리 |
| Fixed 카드 변수 우선순위 전체 일반화 | 부서 배경/fallback 텍스트, 공통 Border/accent, SVG/compact HTML 이름을 구분 |
| 모든 gradient 입력에 background 표현식을 허용한 설명 | Fixed background-image용 CSS image 표현식 필요 명시 |
| company secondary의 임의 n처럼 읽히는 표 | 실제 ID/n 조합 명시 |
| HTTP Vanilla snippet의 Element/null 컨테이너 | getElementById + 존재 확인으로 HTMLElement 계약 명시 |
가이드의 TS/TSX 13개와 HTTP Vanilla JS 1개를 추출해 strict·ES2022·Bundler·react-jsx·skipLibCheck=false로 14/14 타입 검사 PASS. 공개 package .d.ts와 Vite client CSS URL 타입을 사용했다. 짧은 theme 예제의 앞 문맥 dataSource만 harness 선언으로 제공하고, HTTP ESM 경로는 실제 공개 Core 타입으로 해석했다. API·Props를 임의 생성하거나 잘못된 옵션을 mock으로 감추지 않았다. P11 TSX fixture도 함께 검사했다.
전체 문서 예제의 개별 browser 실행은 NOT VERIFIED다. HMChart/CustomChart 자체의 browser 시연 대신 실제 HM Entry Story 및 Core/React fixture를 확인했다. P10.7·UsageGuide 당시 검증 원본을 지우거나 후속 결과로 덮어쓰지 않았다.
AI 정책의 사전 질문, 이미 명시된 방식 재질문 금지, Chart Only 최소 UI, Full Page HM UI 우선 재사용, 정확한 계층/인원/제공 데이터 보존, 기존 화면 비소급은 현재 API와 일치한다. parentId 기반 가변 계층과 division/office/div/team/cell enum을 소스에서 확인했으며 유형별 새 디자인 자동 선택으로 설명하지 않는다. Cell Border Only 제외 및 Fixed Chart Only 제약을 보존했다. 새 조직도 생성 요청이 아니므로 이번 감사에 생성 방식 질문을 추가하지 않았다.
6. 검증·Guard·보존 증거
| 확인 | 결과 / 근거 |
|---|---|
| Core/React 변경 범위 Typecheck | 신규 실행 PASS (typecheck:org-chart, typecheck:org-chart-react) |
| Core/React/소비 예제 Build | 신규 실행 PASS, CSS URL production assets 생성. 기존 host-context/minifier·큰 chunk 경고 유지 |
| 문서 예제/fixture Typecheck | 신규 실행 PASS, test-results/org-chart-p11-1/tsconfig.json |
| Storybook 4개 화면 렌더 | 신규 4/4 PASS, 오류 0. 공개 index/데이터/대표 동작은 신규 browser/recheck 결과 |
| React/Vanilla Chart Only·Theme 대표 | 신규 browser + 실패 한정 recheck PASS, console/page 오류 0 |
| 실제 Guard | 신규 재검사 status PASS, staticStatus PASS, issues 0 / FAIL 0 |
| Guard CSS phases | STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED. 결합 styleVerification 미생성 유지 |
| Guard 회귀 | 기존 P11 94/94 및 CSS 회귀 5/5 PASS 재사용. 검사기 P11.1 변경 0이라 반복하지 않음. 실제 Guard 결과와 별개 |
| 다른 HM 패키지 Guard 영향 | 기존 P11 실제 비교: 이슈 67개 동일, FAIL 0, 원본 NOT VERIFIED 보존. 변경 없는 동일 분석기/제품 소스 범위 재사용 |
| 기본 디자인 6화면 | P11 before/after PNG 12파일을 읽어 기록 SHA-256을 재확인, 6/6 동일. 신규 baseline 캡처·승인 아님 |
| Full 390px/4폭/P11 HTTP Vanilla | P10.10 Full 390px·P11 4폭 104개·순수 HTTP Core 8개 PASS 기존 유효 결과 재사용 |
| Markdown 링크/경로·diff | 변경 문서 4개 로컬 링크/앵커 236개 PASS, git diff --check PASS. Staged 검사는 Commit 직전 수행 |
Guard는 다음 한 번의 실제 검사로 확인했다. 규칙 우회·예외 목록·미선언 token 자동 승인·Runtime PASS 승격 없음.
node scripts/ai-generation-guard.mjs --target . --scope PARTIAL --profile STORYBOOK --files packages/org-chart/src/core/department-colors.ts,packages/org-chart/src/core/style-presets.ts,packages/org-chart/src/core/expanded-content.ts --json
증거는 ignored 로컬 폴더에 보존하며 새 Clone에 포함되지 않는다. verify-p11.mjs의 기본값 비교는 변경 전 산출물에서 --baseline으로 생성한 기록을 필요로 한다. 새 Clone에서 baseline이 없는 실행을 역사적 기본 디자인 보존 검사로 해석하지 않는다:
- 현재 검사 원본, 실패 한정 재검사, 실제 Guard, CSS 전체 추출, 예제 manifest.
- Chart Only React 최초 화면, Vanilla 최초 화면, HM Dialog.
- 기본 6화면 해시, P11 공용 비교, P11 구현·검증.
실행 URL: Storybook, React Chart Only, Vanilla Chart Only, React 외부 테마. 서버는 이 작업에서 시작했고 검토용으로 유지했다. sandbox 로컬 연결 제한을 해소하기 위해 서버/Chrome을 같은 실행 환경에서 실행했다. 연결 실패를 제품 오류로 판정하지 않았다.
7. 미검증과 Commit 판정
Commit 가능: PASS. 공개 API 일치·테마/Chart Only/4 Story 유지·필수 타입/빌드·실제 Guard FAIL 0·기본 6화면 보존·정상 변경 27개·작성자 일치를 확인했다. 관련 파일만 Stage하고 Staged Diff·원격 Feature/main SHA를 재확인한 뒤 일반 Feature Fast-forward Push한다. 원격이 기준에서 바뀌면 중단하며 main은 건드리지 않는다.
NOT VERIFIED: 모든 pointer D&D 조합·회사×100/300명×모든 layout의 전체 회귀, HM Dialog 별도 팔레트 변경 비교, HMChart/CustomChart 자체 browser 시연, 전체 Story before/after 픽셀 비교, Firefox/Safari/실제 모바일/touch/스크린리더, 전체 성능·SSR·새 fresh install·신규 npm audit·배포. 사용자 최종 디자인 승인 PENDING. Core 86개·Chart Only 51개 및 직접 영향 없는 P7~P10 전체 회귀는 반복하지 않았다.
기존 개발 High Advisory 7건, 삼안 약 2.64:1·장헌산업 약 4.29:1 제목 대비 미해결 기록을 보존한다. P11 Guard 개선/테마 기능을 보안 해결·WCAG 자동 충족으로 표현하지 않는다. Fixed Chart Only와 Fixed 이미지 내부 테마화는 미검증 후보가 아닌 미지원이다.
8. 작업 시간
- Started At: 2026-10-13 22:26:04 KST
- Estimated Duration: 최초 약 60분 (분석 20 / 검증 30 / 보고·Git 10)
- 검증 완료·최종 Git 완료의 Completed At / Actual Duration / Variance는 작업 최종 응답에 기록한다. 이 파일은 Commit 전 기록이므로 미래 완료 시간을 추정하지 않는다.
9. P11 변수 소스 대조 부록
각 이름의 실제 선언 또는 첫 사용 표현식·selector/속성을 기록한다. 공개 입력은 내부 선언 없음(상속용)이며 표현식의 fallback이 기본값이다. 공개 행은 호스트 상속 또는 Shadow 외부 CSS override 가능, 내부 행은 계산 구현이며 직접 override를 권장하지 않는다. 모든 행은 같은 Core CSS를 쓰는 React/Vanilla 공통 경로다. 여러 scope에서 fallback이 다르면 해당 소스 전체가 최종 기준이며 첫 표현식만 유일한 기본값으로 해석하지 않는다. 카드 SVG/PNG 영역·HM Dialog는 앞의 지원 경계를 따른다.
| 실제 이름 | 구분 | 선언/사용 위치 | scope / 적용 속성 | 선언값 또는 소비 표현식(default fallback 포함) |
|---|---|---|---|---|
--hm-orgchart-accent |
내부/기존 선언 | color-presets.css:11 | [data-group-variant="0"] → --hm-orgchart-accent |
var(--hm-orgchart-current-border) |
--hm-orgchart-accent-color |
공개 입력(상속) | design-tokens.css:17 | .hm-orgchart-shell → --hm-orgchart-resolved-accent |
var(--hm-orgchart-accent-color, #eef2fa) |
--hm-orgchart-action-primary |
공개 입력(상속) | design-tokens.css:19 | .hm-orgchart-shell → --hm-orgchart-resolved-action-primary |
var(--hm-orgchart-action-primary, #45639f) |
--hm-orgchart-bg-brand |
공개 입력(상속) | design-tokens.css:11 | .hm-orgchart-shell → --hm-orgchart-resolved-bg-brand |
var(--hm-orgchart-bg-brand, linear-gradient(180deg, #45639f 0%, #809dd7 100%)) |
--hm-orgchart-bg-content |
공개 입력(상속) | design-tokens.css:9 | .hm-orgchart-shell → --hm-orgchart-resolved-bg-content |
var(--hm-orgchart-bg-content, #f4f7fb) |
--hm-orgchart-bg-subtle |
공개 입력(상속) | design-tokens.css:10 | .hm-orgchart-shell → --hm-orgchart-resolved-bg-subtle |
var(--hm-orgchart-bg-subtle, #e9edf3) |
--hm-orgchart-bg-surface |
공개 입력(상속) | design-tokens.css:8 | .hm-orgchart-shell → --hm-orgchart-resolved-bg-surface |
var(--hm-orgchart-bg-surface, #ffffff) |
--hm-orgchart-border |
공개 입력(상속) | color-presets.css:9 | [data-group-variant="0"] → --hm-orgchart-current-border |
var(--hm-orgchart-business-management-border, var(--hm-orgchart-border, #194d82)) |
--hm-orgchart-business-management-border |
공개 입력(상속) | color-presets.css:9 | [data-group-variant="0"] → --hm-orgchart-current-border |
var(--hm-orgchart-business-management-border, var(--hm-orgchart-border, #194d82)) |
--hm-orgchart-business-management-card-background |
공개 입력(상속) | color-presets.css:6 | [data-group-variant="0"] → --hm-orgchart-current-card-background |
var(--hm-orgchart-business-management-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))) |
--hm-orgchart-business-management-card-color |
공개 입력(상속) | color-presets.css:7 | [data-group-variant="0"] → --hm-orgchart-current-card-color |
var(--hm-orgchart-business-management-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))) |
--hm-orgchart-business-management-department-color |
공개 입력(상속) | color-presets.css:8 | [data-group-variant="0"] → --hm-orgchart-current-department-color |
var(--hm-orgchart-business-management-department-color, var(--hm-orgchart-department-color, #ffffff)) |
--hm-orgchart-business-management-gradient |
공개 입력(상속) | color-presets.css:10 | [data-group-variant="0"] → --hm-orgchart-current-gradient |
var(--hm-orgchart-business-management-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #194d82 0%, #1d395c 100%))) |
--hm-orgchart-business-planning-border |
공개 입력(상속) | color-presets.css:19 | [data-group-variant="1"] → --hm-orgchart-current-border |
var(--hm-orgchart-business-planning-border, var(--hm-orgchart-border, #2164a8)) |
--hm-orgchart-business-planning-card-background |
공개 입력(상속) | color-presets.css:16 | [data-group-variant="1"] → --hm-orgchart-current-card-background |
var(--hm-orgchart-business-planning-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))) |
--hm-orgchart-business-planning-card-color |
공개 입력(상속) | color-presets.css:17 | [data-group-variant="1"] → --hm-orgchart-current-card-color |
var(--hm-orgchart-business-planning-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))) |
--hm-orgchart-business-planning-department-color |
공개 입력(상속) | color-presets.css:18 | [data-group-variant="1"] → --hm-orgchart-current-department-color |
var(--hm-orgchart-business-planning-department-color, var(--hm-orgchart-department-color, #ffffff)) |
--hm-orgchart-business-planning-gradient |
공개 입력(상속) | color-presets.css:20 | [data-group-variant="1"] → --hm-orgchart-current-gradient |
var(--hm-orgchart-business-planning-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #2164a8 0%, #254975 100%))) |
--hm-orgchart-card-accent |
공개 입력(상속) | employee-card.css:40 | `.hm-orgchart-employee[data-card-kind="leader"], | |
.hm-orgchart-employee[data-card-kind="topLeader"]→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))) |
|||
--hm-orgchart-card-background |
공개 입력(상속) | color-presets.css:6 | [data-group-variant="0"] → --hm-orgchart-current-card-background |
var(--hm-orgchart-business-management-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))) |
--hm-orgchart-card-border |
공개 입력(상속) | employee-card.css:14 | .hm-orgchart-employee[data-card-kind] → border |
var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-card-border, var(--hm-orgchart-current-border, var(--hm-orgchart-resolved-stroke-default))) |
--hm-orgchart-card-color |
공개 입력(상속) | color-presets.css:7 | [data-group-variant="0"] → --hm-orgchart-current-card-color |
var(--hm-orgchart-business-management-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))) |
--hm-orgchart-card-focus-color |
공개 입력(상속) | employee-info-dialog.css:10 | `.hm-orgchart-organization-link:focus-visible, | |
.hm-orgchart-employee[role="button"]:focus-visible→outline` |
2px solid var(--hm-orgchart-card-focus-color, var(--hm-orgchart-resolved-stroke-input-focus)) |
|||
--hm-orgchart-card-hover-background |
공개 입력(상속) | org-chart-expanded.css:117 | .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-card-position-color |
공개 입력(상속) | employee-card.css:242 | .hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-role → color |
var(--hm-orgchart-card-position-color, var(--hm-orgchart-person-position-color)) |
--hm-orgchart-company-baron |
공개 입력(상속) | color-presets.css:103 | .hm-orgchart-expanded [data-company-id="baron"] → --hm-orgchart-expanded-primary |
var(--hm-orgchart-company-baron, #0C367F) |
--hm-orgchart-company-halla |
공개 입력(상속) | color-presets.css:97 | .hm-orgchart-expanded [data-company-id="halla"] → --hm-orgchart-expanded-primary |
var(--hm-orgchart-company-halla, #0068B7) |
--hm-orgchart-company-halla-secondary-1 |
공개 입력(상속) | color-presets.css:99 | .hm-orgchart-expanded [data-company-id="halla"] → --hm-orgchart-expanded-secondary-1 |
var(--hm-orgchart-company-halla-secondary-1, #231815) |
--hm-orgchart-company-hanmac |
공개 입력(상속) | color-presets.css:66 | .hm-orgchart-expanded [data-company-id="hanmac"] → --hm-orgchart-expanded-primary |
var(--hm-orgchart-company-hanmac, #CB2E28) |
--hm-orgchart-company-hanmac-secondary-1 |
공개 입력(상속) | color-presets.css:68 | .hm-orgchart-expanded [data-company-id="hanmac"] → --hm-orgchart-expanded-secondary-1 |
var(--hm-orgchart-company-hanmac-secondary-1, #1D4289) |
--hm-orgchart-company-jangheon |
공개 입력(상속) | color-presets.css:84 | .hm-orgchart-expanded [data-company-id="jangheon"] → --hm-orgchart-expanded-primary |
var(--hm-orgchart-company-jangheon, #1D418D) |
--hm-orgchart-company-jangheon-industry |
공개 입력(상속) | color-presets.css:78 | .hm-orgchart-expanded [data-company-id="jangheon-industry"] → --hm-orgchart-expanded-primary |
var(--hm-orgchart-company-jangheon-industry, #4580A6) |
--hm-orgchart-company-jangheon-industry-secondary-1 |
공개 입력(상속) | color-presets.css:80 | .hm-orgchart-expanded [data-company-id="jangheon-industry"] → --hm-orgchart-expanded-secondary-1 |
var(--hm-orgchart-company-jangheon-industry-secondary-1, #92BED4) |
--hm-orgchart-company-jangheon-secondary-1 |
공개 입력(상속) | color-presets.css:86 | .hm-orgchart-expanded [data-company-id="jangheon"] → --hm-orgchart-expanded-secondary-1 |
var(--hm-orgchart-company-jangheon-secondary-1, #AE232A) |
--hm-orgchart-company-ptc |
공개 입력(상속) | color-presets.css:90 | .hm-orgchart-expanded [data-company-id="ptc"] → --hm-orgchart-expanded-primary |
var(--hm-orgchart-company-ptc, #84338E) |
--hm-orgchart-company-ptc-secondary-1 |
공개 입력(상속) | color-presets.css:92 | .hm-orgchart-expanded [data-company-id="ptc"] → --hm-orgchart-expanded-secondary-1 |
var(--hm-orgchart-company-ptc-secondary-1, #F7AF00) |
--hm-orgchart-company-ptc-secondary-2 |
공개 입력(상속) | color-presets.css:93 | .hm-orgchart-expanded [data-company-id="ptc"] → --hm-orgchart-expanded-secondary-2 |
var(--hm-orgchart-company-ptc-secondary-2, #0066B5) |
--hm-orgchart-company-saman |
공개 입력(상속) | color-presets.css:72 | .hm-orgchart-expanded [data-company-id="saman"] → --hm-orgchart-expanded-primary |
var(--hm-orgchart-company-saman, #F08300) |
--hm-orgchart-company-saman-secondary-1 |
공개 입력(상속) | color-presets.css:74 | .hm-orgchart-expanded [data-company-id="saman"] → --hm-orgchart-expanded-secondary-1 |
var(--hm-orgchart-company-saman-secondary-1, #6D6C6C) |
--hm-orgchart-current-border |
내부/기존 선언 | color-presets.css:9 | [data-group-variant="0"] → --hm-orgchart-current-border |
var(--hm-orgchart-business-management-border, var(--hm-orgchart-border, #194d82)) |
--hm-orgchart-current-card-background |
내부/기존 선언 | color-presets.css:6 | [data-group-variant="0"] → --hm-orgchart-current-card-background |
var(--hm-orgchart-business-management-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))) |
--hm-orgchart-current-card-color |
내부/기존 선언 | color-presets.css:7 | [data-group-variant="0"] → --hm-orgchart-current-card-color |
var(--hm-orgchart-business-management-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))) |
--hm-orgchart-current-department-color |
내부/기존 선언 | color-presets.css:8 | [data-group-variant="0"] → --hm-orgchart-current-department-color |
var(--hm-orgchart-business-management-department-color, var(--hm-orgchart-department-color, #ffffff)) |
--hm-orgchart-current-gradient |
내부/기존 선언 | color-presets.css:10 | [data-group-variant="0"] → --hm-orgchart-current-gradient |
var(--hm-orgchart-business-management-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #194d82 0%, #1d395c 100%))) |
--hm-orgchart-department-color |
공개 입력(상속) | color-presets.css:8 | [data-group-variant="0"] → --hm-orgchart-current-department-color |
var(--hm-orgchart-business-management-department-color, var(--hm-orgchart-department-color, #ffffff)) |
--hm-orgchart-design-planning-border |
공개 입력(상속) | color-presets.css:49 | [data-group-variant="4"] → --hm-orgchart-current-border |
var(--hm-orgchart-design-planning-border, var(--hm-orgchart-border, #09a7a2)) |
--hm-orgchart-design-planning-card-background |
공개 입력(상속) | color-presets.css:46 | [data-group-variant="4"] → --hm-orgchart-current-card-background |
var(--hm-orgchart-design-planning-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))) |
--hm-orgchart-design-planning-card-color |
공개 입력(상속) | color-presets.css:47 | [data-group-variant="4"] → --hm-orgchart-current-card-color |
var(--hm-orgchart-design-planning-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))) |
--hm-orgchart-design-planning-department-color |
공개 입력(상속) | color-presets.css:48 | [data-group-variant="4"] → --hm-orgchart-current-department-color |
var(--hm-orgchart-design-planning-department-color, var(--hm-orgchart-department-color, #ffffff)) |
--hm-orgchart-design-planning-gradient |
공개 입력(상속) | color-presets.css:50 | [data-group-variant="4"] → --hm-orgchart-current-gradient |
var(--hm-orgchart-design-planning-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #09a7a2 0%, #00847f 100%))) |
--hm-orgchart-dialog-background |
공개 입력(상속) | employee-info-dialog.css:21 | .hm-orgchart-employee-dialog → background |
var(--hm-orgchart-dialog-background, var(--hm-orgchart-resolved-bg-surface)) |
--hm-orgchart-dialog-border |
공개 입력(상속) | employee-info-dialog.css:19 | .hm-orgchart-employee-dialog → border |
var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-dialog-border, var(--hm-orgchart-resolved-stroke-default)) |
--hm-orgchart-dialog-close-color |
공개 입력(상속) | employee-info-dialog.css:38 | .hm-orgchart-employee-dialog-close → --hm-orgchart-dialog-close-ink |
var(--hm-orgchart-dialog-close-color, var(--foreground, var(--hm-sem-fg-primary, #0a221d))) |
--hm-orgchart-dialog-close-hover |
내부/기존 선언 | employee-info-dialog.css:39 | .hm-orgchart-employee-dialog-close → --hm-orgchart-dialog-close-hover |
var(--hm-orgchart-dialog-close-hover-background, var(--muted, var(--hm-sem-bg-subtle, #f4f1ea))) |
--hm-orgchart-dialog-close-hover-background |
공개 입력(상속) | employee-info-dialog.css:39 | .hm-orgchart-employee-dialog-close → --hm-orgchart-dialog-close-hover |
var(--hm-orgchart-dialog-close-hover-background, var(--muted, var(--hm-sem-bg-subtle, #f4f1ea))) |
--hm-orgchart-dialog-close-ink |
내부/기존 선언 | employee-info-dialog.css:38 | .hm-orgchart-employee-dialog-close → --hm-orgchart-dialog-close-ink |
var(--hm-orgchart-dialog-close-color, var(--foreground, var(--hm-sem-fg-primary, #0a221d))) |
--hm-orgchart-dialog-close-ring |
내부/기존 선언 | employee-info-dialog.css:40 | .hm-orgchart-employee-dialog-close → --hm-orgchart-dialog-close-ring |
var(--hm-orgchart-dialog-focus-color, var(--ring, var(--hm-sem-stroke-input-focus, #266651))) |
--hm-orgchart-dialog-color |
공개 입력(상속) | employee-info-dialog.css:22 | .hm-orgchart-employee-dialog → color |
var(--hm-orgchart-dialog-color, var(--hm-orgchart-resolved-fg-primary)) |
--hm-orgchart-dialog-focus-color |
공개 입력(상속) | employee-info-dialog.css:40 | .hm-orgchart-employee-dialog-close → --hm-orgchart-dialog-close-ring |
var(--hm-orgchart-dialog-focus-color, var(--ring, var(--hm-sem-stroke-input-focus, #266651))) |
--hm-orgchart-dispatched-card-border |
공개 입력(상속) | org-chart-expanded.css:107 | .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-work-status="dispatched"] → border-color |
var(--hm-orgchart-dispatched-card-border, var(--hm-orgchart-card-border, var(--hm-orgchart-resolved-stroke-default))) |
--hm-orgchart-dispatched-card-color |
공개 입력(상속) | org-chart-expanded.css:108 | .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-work-status="dispatched"] → color |
var(--hm-orgchart-dispatched-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))) |
--hm-orgchart-dispatched-card-gradient |
공개 입력(상속) | org-chart-expanded.css:105 | .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)) |
--hm-orgchart-dispatched-title-background |
공개 입력(상속) | summary-sections.css:142 | .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-expanded-card-accent-width |
내부/기존 선언 | org-chart-expanded.css:154 | .hm-orgchart-expanded → --hm-orgchart-expanded-card-accent-width |
3px |
--hm-orgchart-expanded-card-border-width |
내부/기존 선언 | org-chart-expanded.css:153 | .hm-orgchart-expanded → --hm-orgchart-expanded-card-border-width |
1px |
--hm-orgchart-expanded-card-primary |
내부/기존 선언 | color-presets.css:67 | .hm-orgchart-expanded [data-company-id="hanmac"] → --hm-orgchart-expanded-card-primary |
var(--hm-orgchart-company-hanmac, #CB2E28) |
--hm-orgchart-expanded-line-color |
공개 입력(상속) | org-chart-expanded.css:10 | .hm-orgchart-expanded → --hm-orgchart-resolved-expanded-line-color |
var(--hm-orgchart-expanded-line-color, #738399) |
--hm-orgchart-expanded-line-width |
내부/기존 선언 | org-chart-expanded.css:8 | .hm-orgchart-expanded → --hm-orgchart-expanded-line-width |
var(--hm-orgchart-resolved-border-width) |
--hm-orgchart-expanded-primary |
내부/기존 선언 | color-presets.css:66 | .hm-orgchart-expanded [data-company-id="hanmac"] → --hm-orgchart-expanded-primary |
var(--hm-orgchart-company-hanmac, #CB2E28) |
--hm-orgchart-expanded-secondary-1 |
내부/기존 선언 | color-presets.css:68 | .hm-orgchart-expanded [data-company-id="hanmac"] → --hm-orgchart-expanded-secondary-1 |
var(--hm-orgchart-company-hanmac-secondary-1, #1D4289) |
--hm-orgchart-expanded-secondary-2 |
내부/기존 선언 | color-presets.css:93 | .hm-orgchart-expanded [data-company-id="ptc"] → --hm-orgchart-expanded-secondary-2 |
var(--hm-orgchart-company-ptc-secondary-2, #0066B5) |
--hm-orgchart-fg-primary |
공개 입력(상속) | design-tokens.css:12 | .hm-orgchart-shell → --hm-orgchart-resolved-fg-primary |
var(--hm-orgchart-fg-primary, #10243b) |
--hm-orgchart-fg-secondary |
공개 입력(상속) | design-tokens.css:13 | .hm-orgchart-shell → --hm-orgchart-resolved-fg-secondary |
var(--hm-orgchart-fg-secondary, #596575) |
--hm-orgchart-fixed-line-color |
공개 입력(상속) | org-chart-readonly.css:204 | .hm-orgchart-workdesk-overlay path[data-connector] → stroke |
var(--hm-orgchart-fixed-line-color, #45639F) |
--hm-orgchart-gradient |
공개 입력(상속) | color-presets.css:10 | [data-group-variant="0"] → --hm-orgchart-current-gradient |
var(--hm-orgchart-business-management-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #194d82 0%, #1d395c 100%))) |
--hm-orgchart-group-background |
내부/기존 선언 | color-presets.css:12 | [data-group-variant="0"] → --hm-orgchart-group-background |
var(--hm-orgchart-current-gradient) |
--hm-orgchart-group-border |
공개 입력(상속) | org-chart-content.css:73 | .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization → border-top |
var(--hm-orgchart-resolved-border-top-width) solid var(--hm-orgchart-group-border, var(--hm-orgchart-current-border)) |
--hm-orgchart-group-title-background |
공개 입력(상속) | org-chart-content.css:100 | .hm-orgchart-engine.orgchart .node[data-header-role="organization"] .hm-orgchart-organization-name → background |
var(--hm-orgchart-group-title-background, var(--hm-orgchart-group-background)) |
--hm-orgchart-group-title-color |
공개 입력(상속) | org-chart-content.css:95 | .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization-name → color |
var(--hm-orgchart-group-title-color, var(--hm-orgchart-current-department-color)) |
--hm-orgchart-integrated-system-border |
공개 입력(상속) | color-presets.css:39 | [data-group-variant="3"] → --hm-orgchart-current-border |
var(--hm-orgchart-integrated-system-border, var(--hm-orgchart-border, #8c67b6)) |
--hm-orgchart-integrated-system-card-background |
공개 입력(상속) | color-presets.css:36 | [data-group-variant="3"] → --hm-orgchart-current-card-background |
var(--hm-orgchart-integrated-system-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))) |
--hm-orgchart-integrated-system-card-color |
공개 입력(상속) | color-presets.css:37 | [data-group-variant="3"] → --hm-orgchart-current-card-color |
var(--hm-orgchart-integrated-system-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))) |
--hm-orgchart-integrated-system-department-color |
공개 입력(상속) | color-presets.css:38 | [data-group-variant="3"] → --hm-orgchart-current-department-color |
var(--hm-orgchart-integrated-system-department-color, var(--hm-orgchart-department-color, #ffffff)) |
--hm-orgchart-integrated-system-gradient |
공개 입력(상속) | color-presets.css:40 | [data-group-variant="3"] → --hm-orgchart-current-gradient |
var(--hm-orgchart-integrated-system-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #8c67b6 0%, #5d3494 100%))) |
--hm-orgchart-leader-card-background |
공개 입력(상속) | org-chart-expanded.css:99 | .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-on-accent |
공개 입력(상속) | design-tokens.css:18 | .hm-orgchart-shell → --hm-orgchart-resolved-on-accent |
var(--hm-orgchart-on-accent, #224387) |
--hm-orgchart-on-action-primary |
공개 입력(상속) | design-tokens.css:20 | .hm-orgchart-shell → --hm-orgchart-resolved-on-action-primary |
var(--hm-orgchart-on-action-primary, #ffffff) |
--hm-orgchart-on-leave-card-border |
공개 입력(상속) | org-chart-expanded.css:113 | .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-work-status="onLeave"] → border-color |
var(--hm-orgchart-on-leave-card-border, var(--hm-orgchart-card-border, var(--hm-orgchart-resolved-stroke-default))) |
--hm-orgchart-on-leave-card-color |
공개 입력(상속) | org-chart-expanded.css:114 | .hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee[data-work-status="onLeave"] → color |
var(--hm-orgchart-on-leave-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))) |
--hm-orgchart-on-leave-card-gradient |
공개 입력(상속) | org-chart-expanded.css:111 | .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)) |
--hm-orgchart-on-leave-title-background |
공개 입력(상속) | summary-sections.css:148 | .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-person-position-color |
내부/기존 선언 | employee-card.css:206 | .hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) → --hm-orgchart-person-position-color |
#797979 |
--hm-orgchart-resolved-action-primary |
내부/기존 선언 | design-tokens.css:19 | .hm-orgchart-shell → --hm-orgchart-resolved-action-primary |
var(--hm-orgchart-action-primary, #45639f) |
--hm-orgchart-resolved-bg-surface |
내부/기존 선언 | design-tokens.css:8 | .hm-orgchart-shell → --hm-orgchart-resolved-bg-surface |
var(--hm-orgchart-bg-surface, #ffffff) |
--hm-orgchart-resolved-border-top-width |
내부/기존 선언 | design-tokens.css:35 | .hm-orgchart-shell → --hm-orgchart-resolved-border-top-width |
var(--hm-orgchart-border-top-width, 3px) |
--hm-orgchart-resolved-border-width |
내부/기존 선언 | design-tokens.css:34 | .hm-orgchart-shell → --hm-orgchart-resolved-border-width |
var(--hm-orgchart-border-width, 1px) |
--hm-orgchart-resolved-expanded-line-color |
내부/기존 선언 | org-chart-expanded.css:10 | .hm-orgchart-expanded → --hm-orgchart-resolved-expanded-line-color |
var(--hm-orgchart-expanded-line-color, #738399) |
--hm-orgchart-resolved-fg-primary |
내부/기존 선언 | design-tokens.css:12 | .hm-orgchart-shell → --hm-orgchart-resolved-fg-primary |
var(--hm-orgchart-fg-primary, #10243b) |
--hm-orgchart-resolved-on-action-primary |
내부/기존 선언 | design-tokens.css:20 | .hm-orgchart-shell → --hm-orgchart-resolved-on-action-primary |
var(--hm-orgchart-on-action-primary, #ffffff) |
--hm-orgchart-resolved-role-card-background |
내부/기존 선언 | org-chart-expanded.css:119 | .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-resolved-status-card-background |
내부/기존 선언 | org-chart-expanded.css:105 | .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)) |
--hm-orgchart-resolved-status-card-border |
내부/기존 선언 | summary-sections.css:144 | .hm-orgchart-status-group[data-work-status="dispatched"] → --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 |
내부/기존 선언 | summary-sections.css:145 | .hm-orgchart-status-group[data-work-status="dispatched"] → --hm-orgchart-resolved-status-card-color |
var(--hm-orgchart-dispatched-card-color, var(--hm-orgchart-status-card-color, #3e4650)) |
--hm-orgchart-resolved-status-card-gradient |
내부/기존 선언 | summary-sections.css:143 | .hm-orgchart-status-group[data-work-status="dispatched"] → --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-title-background |
내부/기존 선언 | summary-sections.css:142 | .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-stroke-default |
내부/기존 선언 | design-tokens.css:14 | .hm-orgchart-shell → --hm-orgchart-resolved-stroke-default |
var(--hm-orgchart-stroke-default, #bac7d7) |
--hm-orgchart-resolved-stroke-input-focus |
내부/기존 선언 | design-tokens.css:16 | .hm-orgchart-shell → --hm-orgchart-resolved-stroke-input-focus |
var(--hm-orgchart-stroke-input-focus, #45639f) |
--hm-orgchart-solution-sales-border |
공개 입력(상속) | color-presets.css:59 | [data-group-variant="5"] → --hm-orgchart-current-border |
var(--hm-orgchart-solution-sales-border, var(--hm-orgchart-border, #5a963c)) |
--hm-orgchart-solution-sales-card-background |
공개 입력(상속) | color-presets.css:56 | [data-group-variant="5"] → --hm-orgchart-current-card-background |
var(--hm-orgchart-solution-sales-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))) |
--hm-orgchart-solution-sales-card-color |
공개 입력(상속) | color-presets.css:57 | [data-group-variant="5"] → --hm-orgchart-current-card-color |
var(--hm-orgchart-solution-sales-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))) |
--hm-orgchart-solution-sales-department-color |
공개 입력(상속) | color-presets.css:58 | [data-group-variant="5"] → --hm-orgchart-current-department-color |
var(--hm-orgchart-solution-sales-department-color, var(--hm-orgchart-department-color, #ffffff)) |
--hm-orgchart-solution-sales-gradient |
공개 입력(상속) | color-presets.css:60 | [data-group-variant="5"] → --hm-orgchart-current-gradient |
var(--hm-orgchart-solution-sales-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #5a963c 0%, #3f7629 100%))) |
--hm-orgchart-status-card-border |
공개 입력(상속) | summary-sections.css:144 | .hm-orgchart-status-group[data-work-status="dispatched"] → --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-status-card-color |
공개 입력(상속) | summary-sections.css:145 | .hm-orgchart-status-group[data-work-status="dispatched"] → --hm-orgchart-resolved-status-card-color |
var(--hm-orgchart-dispatched-card-color, var(--hm-orgchart-status-card-color, #3e4650)) |
--hm-orgchart-status-card-gradient |
공개 입력(상속) | summary-sections.css:143 | .hm-orgchart-status-group[data-work-status="dispatched"] → --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-status-position-color |
공개 입력(상속) | summary-sections.css:139 | .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-title-background |
공개 입력(상속) | summary-sections.css:142 | .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-status-title-border |
공개 입력(상속) | summary-sections.css:129 | .hm-orgchart-status-group > .hm-orgchart-summary-title → border |
1px solid var(--hm-orgchart-status-title-border, rgba(92, 101, 112, 0.52)) |
--hm-orgchart-status-title-color |
공개 입력(상속) | org-chart-readonly.css:275 | .hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-status-group > .hm-orgchart-summary-title → color |
var(--hm-orgchart-status-title-color, var(--hm-orgchart-resolved-on-action-primary)) |
--hm-orgchart-stroke-default |
공개 입력(상속) | design-tokens.css:14 | .hm-orgchart-shell → --hm-orgchart-resolved-stroke-default |
var(--hm-orgchart-stroke-default, #bac7d7) |
--hm-orgchart-stroke-input-default |
공개 입력(상속) | design-tokens.css:15 | .hm-orgchart-shell → --hm-orgchart-resolved-stroke-input-default |
var(--hm-orgchart-stroke-input-default, #d3dce8) |
--hm-orgchart-stroke-input-focus |
공개 입력(상속) | design-tokens.css:16 | .hm-orgchart-shell → --hm-orgchart-resolved-stroke-input-focus |
var(--hm-orgchart-stroke-input-focus, #45639f) |
--hm-orgchart-talent-growth-border |
공개 입력(상속) | color-presets.css:29 | [data-group-variant="2"] → --hm-orgchart-current-border |
var(--hm-orgchart-talent-growth-border, var(--hm-orgchart-border, #0f6ace)) |
--hm-orgchart-talent-growth-card-background |
공개 입력(상속) | color-presets.css:26 | [data-group-variant="2"] → --hm-orgchart-current-card-background |
var(--hm-orgchart-talent-growth-card-background, var(--hm-orgchart-card-background, var(--hm-orgchart-resolved-bg-surface))) |
--hm-orgchart-talent-growth-card-color |
공개 입력(상속) | color-presets.css:27 | [data-group-variant="2"] → --hm-orgchart-current-card-color |
var(--hm-orgchart-talent-growth-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary))) |
--hm-orgchart-talent-growth-department-color |
공개 입력(상속) | color-presets.css:28 | [data-group-variant="2"] → --hm-orgchart-current-department-color |
var(--hm-orgchart-talent-growth-department-color, var(--hm-orgchart-department-color, #ffffff)) |
--hm-orgchart-talent-growth-gradient |
공개 입력(상속) | color-presets.css:30 | [data-group-variant="2"] → --hm-orgchart-current-gradient |
var(--hm-orgchart-talent-growth-gradient, var(--hm-orgchart-gradient, linear-gradient(180deg, #0f6ace 0%, #044a94 100%))) |
--hm-orgchart-top-leader-card-background |
공개 입력(상속) | org-chart-expanded.css:102 | .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))) |