fix(sw): correct footer auxiliary button state colors

src/sw/sw-footer-stories.css

@@ -28,10 +28,16 @@
 .sw-footer-story-states { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
 .sw-footer-story-state { margin: 0; }
 .sw-footer-story-state figcaption { margin-bottom: 6px; font-size: 12px; color: #3d4a45; }
-.sw-footer-story-lucide { display: grid; place-items: center; color: #d4cbbd; }
+.sw-footer-story-lucide { display: grid; place-items: center; }
 .sw-footer-story-status { padding: 0 12px; font-size: 12px; color: #d4cbbd; font-family: ui-monospace, monospace; }
 .sw-footer-story-row { display: flex; align-items: flex-start; gap: 16px; }
 .sw-footer-story-row--tight { gap: 0; }
 .sw-footer-story-inline { display: inline-flex; flex-direction: column; padding: 0; }
 .sw-footer-story-width + .sw-footer-story-width { margin-top: 16px; }
 .sw-footer-story-reference-narrow { display: block; width: 952px; max-width: 100%; }
+.sw-footer-story-aux-compare { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 16px; }
+.sw-footer-story-aux-row { display: flex; align-items: center; gap: 12px; margin: 0; }
+.sw-footer-story-aux-row figcaption { flex: 0 0 120px; font-size: 12px; color: #3d4a45; }
+.sw-footer-story-aux-row img { display: block; flex: none; }
+.sw-footer-story-aux-states { display: flex; flex-direction: column; gap: 9px; padding: 8px; }
+.sw-footer-story-aux-demo { margin-top: 12px; }

src/sw/sw-footer.stories.tsx

@@ -199,6 +199,24 @@ const MENU_NODES: [string, string][] = [
 ]
 const toolProps = (tool: SWFooterTool) => ({ label: tool.label, icon: tool.icon, activeIcon: tool.activeIcon, "aria-label": tool.ariaLabel })
 const AUX0 = { label: AUX_ITEMS[0].label, icon: AUX_ITEMS[0].icon }
+/** Figma component sets of the six auxiliary toggles, in AUX_ITEMS order. */
+const AUX_SETS = ["26:9248", "26:9267", "26:9298", "26:9320", "26:9381", "26:9412"]
+
+/** Live toggles: click to select / deselect; "하나만" makes the selection move between buttons. */
+function AuxToggleDemo() {
+  const [items, setItems] = useState(AUX_ITEMS)
+  const [single, setSingle] = useState(false)
+  return (
+    <div className="sw-footer-story-aux-demo">
+      <label className="sw-story-log"><input type="checkbox" checked={single} onChange={event => setSingle(event.target.checked)} /> 하나만 선택(다른 버튼을 누르면 선택 이동)</label>
+      <SWTheme className="sw-footer-story-group-surface sw-footer-story-inline">
+        <SWFooterAuxGroup items={items} onPressedChange={(id, pressed) => setItems(list => list.map(item => (
+          item.id === id ? { ...item, pressed } : single && pressed ? { ...item, pressed: false } : item)))} />
+      </SWTheme>
+      <p className="sw-story-log" data-aux-state="">선택: {items.filter(item => item.pressed).map(item => item.label).join(", ") || "없음"}</p>
+    </div>
+  )
+}
 const SMALL_COMMAND = { width: 120, ["--hm-sw-footer-command-expanded-height" as string]: "71px" }
 
 export const FigmaVariants: Story = {
@@ -336,11 +354,26 @@ export const States: Story = {
           </div>
           <p className="sw-story-log">분류 Hover 고정: 두 번째 탭(수정)에 data-sb-hover.</p>
         </StorySection>
-        <StorySection title="보조기능 · 측면 버튼 (Figma Default만 있음)" description="Hover·pressed는 Footer의 #FF5C00 글자 규칙을 재사용(Figma 미정의).">
+        <StorySection title="보조기능 버튼 (Figma btn_객체스냅 26:9248 … btn_선가중치 26:9412)" description="Default = 갈색 그라데이션 테두리 · #F1EDE5 아이콘 · #F6F4F2 글자. Hover = 노랑 테두리(SW Header Hover 토큰)만, 아이콘·글자 기본색. Selected(Figma Variant2 = Variant3) = 주황 그라데이션 테두리 + #FF5C00 아이콘 + #FF5C00 글자, Hover 중에도 유지.">
+          <div className="sw-footer-story-aux-compare">
+            {AUX_ITEMS.map((item, index) => (
+              <figure key={item.id} className="sw-footer-story-aux-row">
+                <figcaption>{AUX_SETS[index]} {item.label}</figcaption>
+                <img src={new URL(`./assets/figma-reference/footer/aux-buttons/${AUX_SETS[index].replace(":", "-")}.png`, import.meta.url).href} alt={`Figma ${AUX_SETS[index]} ${item.label}`} />
+                <SWTheme className="sw-footer-story-group-surface sw-footer-story-aux-states">
+                  <SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} />
+                  <Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} /></Pin>
+                  <SWFooterAuxButton label={item.label} icon={item.icon} pressed />
+                  <Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed /></Pin>
+                </SWTheme>
+              </figure>
+            ))}
+          </div>
+          <p className="sw-story-log">구현 열: Default · Hover · Selected · Selected + Hover (Hover는 data-sb-hover 고정)</p>
+          <AuxToggleDemo />
+        </StorySection>
+        <StorySection title="측면 버튼 (Figma Default만 있음)" description="Hover·pressed는 Footer의 #FF5C00 글자 규칙을 재사용(Figma 미정의).">
           <div className="sw-footer-story-states">
-            <StateCell title="보조 Default"><SWFooterAuxButton {...AUX0} /></StateCell>
-            <StateCell title="보조 Hover"><Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton {...AUX0} /></Pin></StateCell>
-            <StateCell title="보조 pressed"><SWFooterAuxButton {...AUX0} pressed /></StateCell>
             <StateCell title="보조 Disabled"><SWFooterAuxButton {...AUX0} disabled /></StateCell>
             <StateCell title="측면 Default"><SWFooterSideButton title="보조기능" subtitle="전체보기" /></StateCell>
             <StateCell title="측면 Hover"><Pin hover=".hm-sw-footer-side"><SWFooterSideButton title="명령어" subtitle="전체보기" side="end" /></Pin></StateCell>