From eabbf274e3dbe686690862b4097a8a8c4e6c283c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= Date: Tue, 27 Oct 2026 09:08:32 +0900 Subject: [PATCH] feat(sw): footer command group and more panel use the button border gradient The command group and the more panel 1px border now use the same gradient as the side and auxiliary buttons (--hm-sw-footer-group-border), replacing the solid #886D35 token --hm-sw-footer-group-border-color. --- docs/sw/sw-footer-figma-mapping-2026-10-20.md | 1 + packages/sw/src/theme/sw-footer.css | 12 +++++++----- 2 files changed, 8 insertions(+), 5 deletions(-) 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. */