From 3cfbfc09e372756725d31189ecd83a9dfbb93f62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= Date: Mon, 19 Oct 2026 18:27:44 +0900 Subject: [PATCH] fix(sw): apply thin popup scrollbar to SW popup bodies Port the uncommitted HMDesign-SW-Viewer change: SWPopup, SWViewerPanel and the property window share .hm-sw-property__body, so the body and any scrolling area inside it now use a thin #9A9284 / #E0DACE scrollbar (--hm-sw-popup-scrollbar-thumb / -track). Document it in DESIGN_RULES. --- packages/sw/ai/DESIGN_RULES.md | 1 + packages/sw/src/theme/sw.css | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/packages/sw/ai/DESIGN_RULES.md b/packages/sw/ai/DESIGN_RULES.md index 044e3b7..4f95949 100644 --- a/packages/sw/ai/DESIGN_RULES.md +++ b/packages/sw/ai/DESIGN_RULES.md @@ -97,6 +97,7 @@ Container `hm-sw-header` 기준 Breakpoint: **< 1800** 선/문자/치수스타 | 표면 / 테두리 / radius | `#E4DBC9` / 1px `#A67D03` / 4px, 안쪽 1px 검정 그림자 | `--hm-sw-property-surface`, `--hm-sw-property-border` | | 제목줄 | 30px, Figma 제목 아트, 제목 14px 700 `#FFC600` + 검정 외곽선, 닫기 44 × 30(Hover 자산) | `--hm-sw-header-selected-color` | | 본문 | padding 7px, 그룹 사이 8px | — | +| 본문 스크롤바 | `thin`, Thumb `#9A9284` / Track `#E0DACE`(DWG/DXF Viewer 패널과 동일). 본문과 그 안의 스크롤 영역에 적용, 페이지 스크롤바는 그대로 | `--hm-sw-popup-scrollbar-thumb`, `--hm-sw-popup-scrollbar-track` | | 그룹 면(`SWPopupSection`) | 제목 700 · 검정 70%, 내용 면 `#F1ECE1`, 1px `#585349`, radius 4px | `--hm-sw-property-content` | | 행(`SWPopupRow`) | 최소 32px, 라벨 72px 700 검정, 값 글자 `#E60403` 500, 단위 12px | `--hm-sw-property-label`, `--hm-sw-header-input-color` | | 값 상자 | 28px, Hover 1px `rgba(33,29,19,.4)`, 숫자 편집 On `#0F0D0A`(단위 흰색), Dropdown On `#211D13` | `--hm-sw-property-field-*` | diff --git a/packages/sw/src/theme/sw.css b/packages/sw/src/theme/sw.css index dd022cf..40ff20b 100644 --- a/packages/sw/src/theme/sw.css +++ b/packages/sw/src/theme/sw.css @@ -75,6 +75,10 @@ --hm-sw-property-label: #000; --hm-sw-property-table: #d2c8b4; --hm-sw-property-inner-border: #948871; + /* Popup scrollbar (every SW popup body: SWPopup, SWViewerPanel, property window). Same as the DWG/DXF viewer + panels (thin, HM warm-neutral-mid thumb on warm-neutral-light track). */ + --hm-sw-popup-scrollbar-thumb: #9a9284; + --hm-sw-popup-scrollbar-track: #e0dace; /* Property fields (Figma 26:12170 ~ 26:12649): Hover border, editing On, dropdown On, unit colors. */ --hm-sw-property-field-hover-border-color: rgba(33, 29, 19, 0.4); --hm-sw-property-field-editing-background: #0f0d0a; @@ -1514,6 +1518,8 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l .hm-sw-property__close:hover > .hm-sw-property__close-default { visibility: hidden; } .hm-sw-property__close:hover > .hm-sw-property__close-hover { visibility: visible; } .hm-sw-property__body { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 7px 7px 7px; box-shadow: inset 0 2px 2px rgba(255,255,255,.6); } +/* Popup scrollbar: the body and any scrolling area inside it (zero-specificity so content can still override). */ +.hm-sw-property__body, .hm-sw-property__body :where(*) { scrollbar-width: thin; scrollbar-color: var(--hm-sw-popup-scrollbar-thumb) var(--hm-sw-popup-scrollbar-track); } .hm-sw-property[data-selection-kind="all"] .hm-sw-property__body { padding-bottom: 0; } .hm-sw-property[data-selection-kind="all"] .hm-sw-property__counts { margin-top: -8px; } .hm-sw-property__group { flex: 0 0 auto; }