diff --git a/docs/sw/sw-footer-figma-mapping-2026-10-20.md b/docs/sw/sw-footer-figma-mapping-2026-10-20.md index f9ab7e4..dd38205 100644 --- a/docs/sw/sw-footer-figma-mapping-2026-10-20.md +++ b/docs/sw/sw-footer-figma-mapping-2026-10-20.md @@ -61,6 +61,7 @@ | 보조기능 Selected | Figma Variant2 = Variant3: 주황 그라데이션 테두리 + 아이콘·글자 `#FF5C00` | Figma 그대로(2026-10-20 수정: 아이콘을 `currentColor` 인라인 SVG로 바꿔 아이콘까지 주황) | — | | 보조기능 Hover | 버튼 세트에 Hover 없음 | 노랑 테두리만(SW Header Figma Hover 토큰), 아이콘·글자 기본색 | 사용자 확정 2026-10-20 | | 보조기능 Default 테두리 | Figma 갈색 그라데이션 | 그라데이션(2026-10-20 수정 전에는 단색 `#886D35`) | Figma 일치 | +| 명령 그룹·▲ 패널 테두리 | 단색 `#886D35` | 버튼 테두리 그라데이션(`--hm-sw-footer-group-border` = `--hm-sw-footer-aux-border`, 명령어 전체보기·보조기능과 같은 값). 위→아래 방향이라 왼쪽 세로선·모서리에 보이고 윗선은 `#886D35` 그대로. 기존 `--hm-sw-footer-group-border-color` 토큰은 대체 | 사용자 확정 2026-10-27 | | Hover(측면 버튼), Disabled | Figma 없음 | 글자 `#FF5C00`, 40% | AI 구성 값 — 디자인 확인 필요 | | 좁은 폭 | Figma 없음 / 실제 화면 | 빈 칸 축소 → ▲ 패널, 분류 ◀ ▶, 보조기능 아이콘만(1279px 이하), 명령창 최소 280, 바 안 명령창 구성의 칸 영역 = 남는 폭 × 0.57 | 전환 폭·최소 폭·비율은 AI 구성 값(비율은 두 실제 화면 재현) | | 명령창 줄 수 | Figma 3줄(줄 14px) / 실제 화면 접힘 5줄 | Figma 3줄 | Figma 우선 | diff --git a/packages/sw/src/theme/sw-footer.css b/packages/sw/src/theme/sw-footer.css index 00bb98c..785d9ea 100644 --- a/packages/sw/src/theme/sw-footer.css +++ b/packages/sw/src/theme/sw-footer.css @@ -43,7 +43,9 @@ --hm-sw-footer-slot-width: 68px; --hm-sw-footer-slot-height: 47px; --hm-sw-footer-group-background: linear-gradient(0deg, #2f281a 0%, #312a1b 5%, #332b1c 36%, #463c29 58%, #38301f 79%, #19160e 98%); - --hm-sw-footer-group-border-color: #886d35; + /* Not in Figma (user decision 2026-10-27): the group and ▲ panel 1px border use the button border gradient of + 명령어 전체보기 (side-bg.svg) and the auxiliary toggles instead of the solid #886D35 (= its top stop). */ + --hm-sw-footer-group-border: var(--hm-sw-footer-aux-border); --hm-sw-footer-group-radius: 4px; /* bg_vacant 26:10113: the darker surface after the last command (empty slots and the rest of the bar). */ --hm-sw-footer-vacant-background: linear-gradient(0deg, #18150e 28%, #262015 41%, #332b1c 58%, #38301f 81%, #18150e 100%); @@ -124,10 +126,10 @@ min-width: 0; display: flex; margin-top: 1px; - border: 1px solid var(--hm-sw-footer-group-border-color); + border: 1px solid transparent; border-right: 0; border-radius: var(--hm-sw-footer-group-radius) 0 0 0; - background: var(--hm-sw-footer-group-background); + background: var(--hm-sw-footer-group-background) padding-box, var(--hm-sw-footer-group-border) border-box; } /* The vacant surface covers the slot row only (2026-10-20): it used to run under the category row, where the open pocket of the current tab showed it, so a pocket crossing the last command's edge (e.g. 수정 with one command) was @@ -310,10 +312,10 @@ flex-wrap: wrap; /* Rows fill from the left in data order; a short last row stays on the left (the panel itself is right aligned). */ justify-content: flex-start; - border: 1px solid var(--hm-sw-footer-group-border-color); + border: 1px solid transparent; border-bottom: 0; border-radius: var(--hm-sw-footer-group-radius) var(--hm-sw-footer-group-radius) 0 0; - background: var(--hm-sw-footer-group-background); + background: var(--hm-sw-footer-group-background) padding-box, var(--hm-sw-footer-group-border) border-box; } /* Empty slot (btn_add_menu 26:9971): 68 × 46 one pixel below the slot top; hover adds the orange dashed ring. */