From 6eae67628c63678382c7756d6a0fd41cf4bf1637 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= Date: Tue, 10 Nov 2026 15:24:02 +0900 Subject: [PATCH] fix(sw): restore object snap tracking outline and selected colors --- packages/sw/ai/DESIGN_RULES.md | 2 +- packages/sw/src/theme/sw-footer.css | 4 +++- src/sw/sw-footer-fixture.tsx | 6 ++++-- src/sw/sw-footer-stories.css | 5 +++++ 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/sw/ai/DESIGN_RULES.md b/packages/sw/ai/DESIGN_RULES.md index 25e4091..f97afe3 100644 --- a/packages/sw/ai/DESIGN_RULES.md +++ b/packages/sw/ai/DESIGN_RULES.md @@ -204,7 +204,7 @@ | 배치(1920, Figma) | 보조기능 버튼 0~74 → 2 → 보조기능 격자 76~392(위 2) → 4 → 명령 그룹 396~(위 1) → 명령어 전체보기(명령 칸 바로 뒤, 1552~1626) → 나머지 bg_vacant | — | | 측면 버튼 | 74 × 71, 자산 면(그라데이션 + 그라데이션 테두리), 그림자 8px 60% 검정(왼쪽 버튼 → 오른쪽 5px, 오른쪽 버튼 → 왼쪽 5px). 제목 14px 1.3px 외곽선, 부제 14px 1px 외곽선, 위 18 · 줄 간격 2. Hover·Pressed·Expanded = 제목·부제 `#FF5C00` + 1px 주황 그라데이션 테두리(`--hm-sw-footer-gra-border-orange`), Disabled 기본 모양 | `--hm-sw-footer-side-*` | | 보조기능 | 104 × 33, gap 2, radius 3, 면 `linear-gradient(0deg, #262218 8%, #4A3C2B 34%, #594C31 55%, #312A1B 90%)`, 아이콘 중심 (19.5, 16.5), 라벨 13px 왼쪽 36 폭 57 가운데. 테두리 1px 그라데이션(위 → 아래): Default `#886D35 0%, #423625 8.85%, #F3DBA8 26.17%, #0E0B06 83.79%, #574B30 100%`(Figma btn_* 26:9248 …) | `--hm-sw-footer-aux-*`, `--hm-sw-footer-aux-border` | -| 보조기능 상태 | Hover(선택 아님) = 테두리만 노랑 `--hm-sw-header-hover-border-gradient`(`#A67D03 → #F2CC0F → #FADD4F → #F2CC0F → #926E03`, SW Header Figma Hover 재사용 — 버튼 세트에는 Hover 없음, 사용자 확정 2026-10-20). Selected(`aria-pressed="true"`, Figma Variant2 = Variant3) = 테두리 `#DA6813 8.52%, #FFBB89 37.93%, #E5690D 71.85%, #AE3607 92.77%`(Figma `gra-border-orange` = `--hm-sw-footer-gra-border-orange`) + 아이콘 채움·글자 `#FF5C00`, Hover보다 우선. 아이콘 외곽선 검정 90% 1px는 모든 상태 동일 | `--hm-sw-footer-aux-hover-border`, `--hm-sw-footer-aux-pressed-border`, `--hm-sw-footer-aux-icon-color`(`#F1EDE5`) | +| 보조기능 상태 | Hover(선택 아님) = 테두리만 노랑 `--hm-sw-header-hover-border-gradient`(`#A67D03 → #F2CC0F → #FADD4F → #F2CC0F → #926E03`, SW Header Figma Hover 재사용 — 버튼 세트에는 Hover 없음, 사용자 확정 2026-10-20). Selected(`aria-pressed="true"`, Figma Variant2 = Variant3) = 테두리 `#DA6813 8.52%, #FFBB89 37.93%, #E5690D 71.85%, #AE3607 92.77%`(Figma `gra-border-orange` = `--hm-sw-footer-gra-border-orange`) + 아이콘 채움·글자 `#FF5C00`, Hover보다 우선. 선택 면 = `--hm-sw-footer-aux-pressed-background`(`linear-gradient(0deg, #594931 0%, #3B3021 23%, #1B170F 58%, #0D0B07 100%)`, Figma 없음 — 실제 프로그램 화면 샘플링 근사값, 사용자 확정 2026-11-09). 아이콘 외곽선 검정 90% 1px는 모든 상태 동일 | `--hm-sw-footer-aux-hover-border`, `--hm-sw-footer-aux-pressed-border`, `--hm-sw-footer-aux-pressed-background`, `--hm-sw-footer-aux-icon-color`(`#F1EDE5`) | | 명령 그룹 면 | 테두리 위·왼쪽·아래 1px `#886D35`, 왼쪽 위 radius 4, 면 `linear-gradient(0deg, #2F281A 0%, #312A1B 5%, #332B1C 36%, #463C29 58%, #38301F 79%, #19160E 98%)`. 마지막 명령 뒤(빈 칸·나머지)는 bg_vacant `linear-gradient(0deg, #18150E 28%, #262015 41%, #332B1C 58%, #38301F 81%, #18150E 100%)`, 명령 칸 높이까지만(2026-10-20: 분류 행 아래로 내려가지 않아 선택 탭 Pocket 면이 어느 탭에서나 같음) | `--hm-sw-footer-group-*`, `--hm-sw-footer-vacant-background` | | 명령 칸 | 68 × 47, 라벨 14px `#F6F4F2` 위 6(좌우 2, 넘치면 `…` 말줄임 — 칸·글자 크기 그대로, 2026-10-20), 아이콘 18 × 18 위 26 가운데. 칸 사이 구분선 1 × 37(위 5) `linear-gradient(0deg, #20190E, #8A7A5B 45%, #F3DBA8 70%, #423625)` + `-1px 0 1px #000` | `--hm-sw-footer-slot-*`, `--hm-sw-footer-divider*` | | 명령 상태 | Hover = 선택(Figma Variant2 = Variant3): 글자 `#FF5C00` + 주황 아이콘. 색·아이콘만 바뀌고 아이콘·라벨 위치·크기·간격과 칸 크기는 그대로. Disabled 40%(Figma 없음) | `--hm-sw-footer-accent` | diff --git a/packages/sw/src/theme/sw-footer.css b/packages/sw/src/theme/sw-footer.css index 785d9ea..ce6286f 100644 --- a/packages/sw/src/theme/sw-footer.css +++ b/packages/sw/src/theme/sw-footer.css @@ -25,6 +25,8 @@ --hm-sw-footer-aux-height: 33px; --hm-sw-footer-aux-gap: 2px; --hm-sw-footer-aux-background: linear-gradient(0deg, #262218 8%, #4a3c2b 34%, #594c31 55%, #312a1b 90%); + /* Selected face (not in Figma: sampled from the reference program screen, user decision 2026-11-09; stops approximate). */ + --hm-sw-footer-aux-pressed-background: linear-gradient(0deg, #594931 0%, #3b3021 23%, #1b170f 58%, #0d0b07 100%); --hm-sw-footer-aux-radius: 3px; --hm-sw-footer-aux-font-size: 13px; /* 1px borders (Plugin API, btn_객체스냅 26:9248 … btn_선가중치 26:9412): Default = brown gradient, Variant2 / Variant3 @@ -242,7 +244,7 @@ /* Selected (Figma Variant2 / Variant3): orange border, icon and text together; it stays while hovered and after the pointer leaves. Icons follow through currentColor (swFooterAuxIcons, or any currentColor icon). */ .hm-sw-footer-aux__button[aria-pressed="true"] { - background: var(--hm-sw-footer-aux-background) padding-box, var(--hm-sw-footer-aux-pressed-border) border-box; + background: var(--hm-sw-footer-aux-pressed-background) padding-box, var(--hm-sw-footer-aux-pressed-border) border-box; } .hm-sw-footer-aux__button[aria-pressed="true"] :is(.hm-sw-footer-aux__icon, .hm-sw-footer-aux__label) { color: var(--hm-sw-footer-accent); } diff --git a/src/sw/sw-footer-fixture.tsx b/src/sw/sw-footer-fixture.tsx index d132ab8..0f328b4 100644 --- a/src/sw/sw-footer-fixture.tsx +++ b/src/sw/sw-footer-fixture.tsx @@ -50,7 +50,9 @@ export const AUX_ITEMS: SWFooterAuxItem[] = [ * Labels, categories and the extra command are program data; WIPEOUT and 객체스냅추적 have no Figma icon, so the * Story passes its own (lucide) icons the way a program would. */ -const lucide = (node: ReactNode) => {node} +const lucide = (node: ReactNode, outlined = false) => ( + {node} +) export const REFERENCE_TOOLS: SWFooterTool[] = [ { id: "line", label: "LINE", ...swFooterToolIcons.line }, { id: "pline", label: "PLINE", ariaLabel: "Polyline", ...swFooterToolIcons.pline }, @@ -74,7 +76,7 @@ export const REFERENCE_AUX: SWFooterAuxItem[] = [ { id: "lineWeight", label: "선가중치", icon: swFooterAuxIcons.lineWeight, pressed: false }, { id: "gridBackground", label: "격자배경", icon: swFooterAuxIcons.gridBackground, pressed: true }, { id: "gridSnap", label: "격자스냅", icon: swFooterAuxIcons.gridSnap, pressed: false }, - { id: "objectTrack", label: "객체스냅추적", icon: lucide(), pressed: true }, + { id: "objectTrack", label: "객체스냅추적", icon: lucide(, true), pressed: true }, ] export const REFERENCE_HISTORY = [ "Raster image support loaded.", diff --git a/src/sw/sw-footer-stories.css b/src/sw/sw-footer-stories.css index f1a31c9..1bb1c5d 100644 --- a/src/sw/sw-footer-stories.css +++ b/src/sw/sw-footer-stories.css @@ -27,6 +27,11 @@ .sw-footer-story-guide-frame { display: block; width: 194px; height: 111px; background-repeat: no-repeat; background-size: 250px 1179px; } .sw-footer-story-guide-text { display: grid; place-items: center; height: 100%; padding: 8px; font-size: 12px; color: #d4cbbd; text-align: center; } .sw-footer-story-lucide { display: grid; place-items: center; } +/* Aux icons carry a 1px OUTSIDE black 90% outline (AuxIcon); a stroke icon has none, so the same outline is drawn around its alpha. */ +.sw-footer-story-lucide--outlined svg { + filter: drop-shadow(1px 0 0 rgba(0, 0, 0, .9)) drop-shadow(-1px 0 0 rgba(0, 0, 0, .9)) + drop-shadow(0 1px 0 rgba(0, 0, 0, .9)) drop-shadow(0 -1px 0 rgba(0, 0, 0, .9)); +} .sw-footer-story-status { padding: 0 12px; font-size: 12px; color: #d4cbbd; } .sw-footer-story-row { display: flex; align-items: flex-start; gap: 16px; } .sw-footer-story-row--tight { gap: 0; }