shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity
Files
5faa1f1ffe89eb7aeb4aaec81ac5bb2d0f4fced9
HMDesign/packages/sw/ai/DESIGN_RULES.md
T
shkim4andClaude Opus 5.5 e27385e0f0 feat(sw): prepare reusable AI-friendly component package 
- Ship an AI guide in the package (ai/: usage rules, component catalog,
  design rules, composition patterns) via package.json files.
- Add examples A-D that import only public exports: default header,
  viewer header, feature header, and a consumer-side search extension
  that reuses SWHeaderInput and the public SW tokens.
- Add SW-only checks: docs/API consistency, tarball consumer project
  (React 19 + TS + Vite typecheck/build) and a browser check (27/27).
- No runtime source or public API change; README gains a pointer section.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-19 11:22:07 +09:00

6.8 KiB
Raw Blame History

SW 디자인 규칙

출처: @hm-design/sw styles.css(원본 src/theme/sw.css)의 토큰과 규칙, Figma 이지빔 SW rj6wpsfk24lOWvWiVRAANP node 26:8944와 사용자 확정값. 이 문서에 없는 값은 확정값이 아닙니다. 새 컴포넌트에 임의 값을 만들지 말고 아래 토큰을 var(--…)로 읽으세요.

  • 토큰은 .hm-sw-header와 .hm-sw-theme(<SWTheme>)에만 정의됩니다. 새 컴포넌트는 그 안에 렌더링합니다.
  • SW는 @hm-design/ui 토큰을 쓰지 않습니다. UI 패키지 토큰을 복제하거나 섞지 않습니다.
  • Light/Dark 분기 없음. 전역 선택자(html, body, *) 없음.

1. 크기·간격

항목 값 토큰
Header 높이 / 면 높이 49px / 48px --hm-sw-header-height / --hm-sw-header-bar-height
면 사이 간격 2px (Header bar gap)
필드 높이 38px(면 안 위아래 5px) --hm-sw-header-field-height
필드 사이 간격 4px --hm-sw-header-gap
로고 슬롯 32 × 17 (홈 80 × 48 안 12, 16) --hm-sw-header-logo-width / -height
필드 폭 레이어 234, 색상 192, 선스타일 284, 문자·치수스타일 164 —
상세보기 / 창 영역 157 × 38 / 240 × 48(pill 85 × 42, 창 이동 88, 버튼 32 × 2) —
필드 내부 padding 0 10px 0 11px, 텍스트 사이 12px —

2. 색·표면

역할 값 토큰
Header 배경 #060606 --hm-sw-header-background
기본 글자 / 제목 #F6F4F2 / #F0F7F5 --hm-sw-header-text-color / --hm-sw-header-title-color
Selected·On·Hover 글자 #FFC600 --hm-sw-header-selected-color
화살표 #47AF91 --hm-sw-header-arrow-color
파일명 면 세로 gradient, 테두리 #0E4C3A --hm-sw-header-document-background, --hm-sw-header-document-border-color
객체 수정 면 gradient, 테두리 #135643, radius 6px --hm-sw-header-object-background, -object-border-color, -object-radius
속성 필드 면 검정 45–40% gradient, 테두리 #08251C, radius 3px, shadow 0 1px 4px rgba(9,39,30,.7) --hm-sw-header-property-background, -property-border-color, -property-radius, -property-shadow
인쇄·K pill rgba(0,0,0,.8), 테두리 #092920 --hm-sw-header-pill-background, -pill-border-color
문서 Dropdown #103127, 테두리 #041611 --hm-sw-header-document-menu-*
필드 Dropdown(레이어·색상·선·문자·치수) #27241D, 테두리 #000, radius 3px, 행 Hover #62533D + 글자 #FF5C00 --hm-sw-header-layer-menu-*, --hm-sw-header-layer-row-hover-*
Input 글자 #E60403, 편집 #0F0D0A --hm-sw-header-input-*
Tooltip rgba(0,0,0,.8) / #FFF --hm-sw-header-tooltip-*

사용자 확정 면 3개(파일명·객체 수정·속성 필드)는 기본값 유지를 권장합니다.

3. Typography

항목 값
글꼴 Noto Sans KR → Malgun Gothic → Apple SD Gothic Neo (Figma Dotum 대체, 의도된 결정). 폰트 파일은 앱이 로드
기본 / 라벨 14px / 12px (--hm-sw-header-font-size / --hm-sw-header-label-size)
Weight 400, 500, 700만 사용(600 없음). 값·제목·토글 700
자간 값 0.04em, 라벨 0.02em, 파일명 0.06em
Text Stroke Figma Stroke가 있는 텍스트만 검정 외곽선: 14·16px --hm-sw-header-text-outline(1.3px), 12px --hm-sw-header-label-outline(1px). 자기 색 Stroke 없음. More·Tooltip·+ New/Open 제외
말줄임 값은 한 줄 ellipsis, title로 전체 표시

4. 상태

상태 규칙
Hover(테두리 있는 버튼·필드·More·인쇄·K) 1px 테두리가 노란 세로 gradient로 바뀜(--hm-sw-header-hover-border-gradient, 폭 --hm-sw-header-hover-border-width). 크기·배경·그림자 변화 없음, 자기 Dropdown이 열린 필드는 Hover 없음
Hover(파일명, 속성Bar/속성창 토글) 글자만 #FFC600. 링·배경 없음
Hover(필드 미리보기) 텍스트·선/폰트/치수 미리보기 #FFC600
Selected / On 글자·단색 아이콘 #FFC600(data-selected="true"), 배경·테두리 변화 없음
Expanded(Dropdown 열림) 필드 테두리 #081813, 아래 모서리 직각, 필드+목록을 감싸는 1px 노란 링
Focus 2px #F0F7F5 outline, offset −2px(:focus-visible)
Disabled opacity 0.4, 커서 기본. 창 버튼은 disabled 영향 없음
목록 행 Hover와 Selected가 같은 강조(#62533D + #FF5C00)

5. Overlay·Dropdown

  • 필드 Dropdown은 필드 바로 아래(top: 100%)에 겹쳐 열립니다. Portal·Dim 없음, z-index 30. 화면(또는 Header) 밖으로 나가면 좌우만 보정합니다. 부모에 overflow: hidden을 두지 않습니다.
  • 목록 최대 높이 240px(8행), 넘치면 내부 스크롤. 색상 팔레트 118px.
  • 속성창·K 가이드는 position: fixed Overlay(뷰포트 안 보정, Portal·Dim 없음).
  • 한 번에 하나의 Dropdown(SWHeader). 단독 사용 시 각 컴포넌트가 바깥 클릭으로 스스로 닫힙니다.

6. Motion

대상 규칙
창 이동 Hover 1.4s 반복(커서 상승 → 약 444ms 문구 → 오른쪽 위 이동 → 약 888ms부터 유지). Drag(:active) 중 정지. Reduced Motion: 원본 아이콘과 정적 Tooltip
K 가이드 원본 이미지 Pan/Zoom 반복(400ms 대기 후 1022·1022·511·511ms 전환). Reduced Motion 정적
레이어 토글 배경·아이콘 300ms ease-out
기타 Hover·Selected는 즉시 전환(Transition 없음)

7. 반응형 (SWHeader 전용)

Container hm-sw-header 기준 Breakpoint: < 1800 선/문자/치수스타일 → More, < 1180 그리기모드 숨김, < 1080 상세보기 → More·창 이동 24px(창 영역 176), < 900 색상 → More, < 640 인쇄·K → More·창 이동 숨김(창 영역 64), < 520 레이어 상태 아이콘 숨김. More에서 고른 필드는 첫 칸(레이어 자리)에 표시되고 Dropdown이 바로 열립니다(UI 상태만, 데이터 Callback 없음).

조합 Header(개별 컴포넌트)에는 이 규칙이 적용되지 않습니다. 필요한 컨트롤만 배치하고 폭 정책은 소비 앱이 정합니다.

8. 새 컴포넌트 체크리스트

  1. <SWTheme>(또는 SWHeader의 tools) 안에서 렌더링한다.
  2. 표면·크기·색은 위 토큰만 쓴다. 필드형이면 38px·속성 필드 면·12px 라벨 + 14px 700 값.
  3. Hover/Focus/Disabled/Selected를 §4 규칙대로 구현한다(테두리형은 gradient 링, 텍스트형은 글자만 #FFC600).
  4. 입력이 필요하면 SWHeaderInput을 재사용한다.
  5. 값은 Props, 동작은 Callback. CAD 데이터를 내부에서 바꾸지 않는다.
  6. hm-sw-* class를 새로 쓰거나 덮어쓰지 않는다(자기 접두사 사용, 예: app-).
View Git Blame Copy Permalink