shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

feat(sw): popup controls, SWSelect / SWSlider, footer and viewer design fixes

Browse Source 
Components (new public exports, existing APIs unchanged)
- SWPopupPropertyRow: the property window row (layer / color / line style
  pickers, Figma 26:12250 / 26:12170) for SWPopup content. The SWHeader field
  dropdowns stay header-only; Popup B and 도면 설정 now use the popup pickers.
- SWSelect: native panel select (28px, 1px #948871, radius 4, #F1ECE1, 12px),
  used by Popup 도면 설정 단위 and Viewer 축척 지정 단위 (replaces the HM UI
  Select there and the story-only .sw-viewer-story-select CSS).
- SWSlider: appearance "panel" (default, the gauge the popup used) or
  "property" (the property window gauge), same value / events. Shares the
  property gauge CSS; SWViewerSlider renders SWSlider panel with viewer tokens.

Footer
- --hm-sw-footer-gra-border-orange (Figma gra-border-orange; the aux selected
  border token now references it): Model selected / hover, Layout hover and
  Layout + hover surfaces; 보조기능 / 명령어 전체보기 hover lights both lines
  and an orange ring; category + hover in #FF5C00 (menu-add-hover.svg).
- Model / Layout text stays the Default text (#161410, 12px, 400, no outline)
  on hover and on the orange surface: only the surface changes.
- bg_vacant covers the slot row only: the open pocket of a category tab no
  longer splits where it crosses the last command (e.g. 수정 with one command).

Viewer
- Panel title art keeps 308px (max-width: none against host img resets), so
  panels under 312px (250 x auto, 300px) paint the title from the left edge.

Storybook
- SW/Footer: 기본 Footer (sw-footer--default) and States (sw-footer--states)
  removed; full-footer keeps the live composition only, responsive keeps the
  widths (reference / Figma image sections removed, image files kept); the aux
  Figma comparison moved to the verification Story figma-variants.
- SW/Popup: unit SWSelect, SWSlider A / B section, popup pickers, Popup B state.
This commit is contained in:
shkim4 committed 2026-10-20 15:20:06 +09:00
1 parent bbb0e71c91
commit 126a35d60d
15 files changed
+349 -209
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/sw/src/theme/sw-footer.css
+68 -18
View File
@@ -32,7 +32,10 @@
hover ring (yellow gradient, 1px), user decision 2026-10-20. */
--hm-sw-footer-aux-border: linear-gradient(180deg, #886d35 0%, #423625 8.85%, #f3dba8 26.17%, #0e0b06 83.79%, #574b30 100%);
--hm-sw-footer-aux-hover-border: var(--hm-sw-header-hover-border-gradient);
--hm-sw-footer-aux-pressed-border: linear-gradient(180deg, #da6813 8.52%, #ffbb89 37.93%, #e5690d 71.85%, #ae3607 92.77%);
/* Figma gra-border-orange (one value): the selected border of the auxiliary toggles, the Model tab surface and the
hover surface of the Layout tabs and their + (2026-10-20), the hover ring of the side buttons. */
--hm-sw-footer-gra-border-orange: linear-gradient(180deg, #da6813 8.52%, #ffbb89 37.93%, #e5690d 71.85%, #ae3607 92.77%);
--hm-sw-footer-aux-pressed-border: var(--hm-sw-footer-gra-border-orange);
/* Icon fill (Default #F1EDE5, selected = --hm-sw-footer-accent #FF5C00); the black 90% outline never changes. */
--hm-sw-footer-aux-icon-color: #f1ede5;
@@ -126,7 +129,10 @@
border-radius: var(--hm-sw-footer-group-radius) 0 0 0;
background: var(--hm-sw-footer-group-background);
}
.hm-sw-footer__vacant { position: absolute; top: 1px; right: 0; bottom: 0; background: var(--hm-sw-footer-vacant-background); pointer-events: none; }
/* 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
split into the group surface and the vacant surface. Every pocket now shows the same group surface. */
.hm-sw-footer__vacant { position: absolute; top: 1px; right: 0; height: calc(var(--hm-sw-footer-slot-height) - 1px); background: var(--hm-sw-footer-vacant-background); pointer-events: none; }
.hm-sw-footer__scroll {
position: relative;
flex: 0 1 auto;
@@ -173,10 +179,23 @@
.hm-sw-footer-side[data-side="end"] { filter: drop-shadow(calc(-1 * var(--hm-sw-footer-side-shadow-offset)) 0 8px rgba(0, 0, 0, 0.6)); }
.hm-sw-footer-side__title { text-shadow: var(--hm-sw-header-text-outline); }
.hm-sw-footer-side__subtitle { text-shadow: var(--hm-sw-header-label-outline); }
/* Not in Figma: hover / selected reuse the footer accent (#FF5C00) of the slot and category hover. */
.hm-sw-footer-side:hover:not(:disabled) .hm-sw-footer-side__title,
.hm-sw-footer-side[aria-pressed="true"] .hm-sw-footer-side__title,
.hm-sw-footer-side[aria-expanded="true"] .hm-sw-footer-side__title { color: var(--hm-sw-footer-accent); }
/* Not in Figma: hover / selected reuse the footer rules: the whole button lights up, both text lines in the accent
(#FF5C00) and the orange ring of a selected auxiliary toggle over the frame (2026-10-20; was the title only). Size,
face and shadow are unchanged; disabled keeps the default look. */
.hm-sw-footer-side::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid transparent;
background: var(--hm-sw-footer-gra-border-orange) border-box;
-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
opacity: 0;
pointer-events: none;
}
.hm-sw-footer-side:is(:hover:not(:disabled), [aria-pressed="true"], [aria-expanded="true"])::after { opacity: 1; }
.hm-sw-footer-side:is(:hover:not(:disabled), [aria-pressed="true"], [aria-expanded="true"]) :is(.hm-sw-footer-side__title, .hm-sw-footer-side__subtitle) { color: var(--hm-sw-footer-accent); }
/* ---------- Auxiliary toggles (객체스냅 …) ---------- */
.hm-sw-footer-aux {
@@ -373,13 +392,24 @@
.hm-sw-footer-menu__tab[aria-selected="true"] { margin-right: 7px; }
.hm-sw-footer-menu__tab[aria-selected="true"]:not(:first-of-type) { margin-left: 7px; }
.hm-sw-footer-menu__add { position: relative; flex: 0 0 28px; width: 28px; height: 12px; margin-top: 6px; background: url("../components/sw-footer/assets/menu-add.svg") 0 0 / 28px 12px no-repeat; }
/* Not in Figma: only Default of btn_add (26:9451) exists; hover keeps the asset (no invented look). */
/* Not in Figma: only Default of btn_add (26:9451) exists. Hover (2026-10-20, user request): the + in the footer accent
(#FF5C00, same black outline), like the category tabs next to it. */
.hm-sw-footer-menu__add:hover:not(:disabled) { background-image: url("../components/sw-footer/assets/menu-add-hover.svg"); }
/* ---------- Layout tabs ---------- */
.hm-sw-footer-tabs { display: flex; align-items: flex-end; gap: 1px; height: var(--hm-sw-footer-tab-height); font-size: var(--hm-sw-footer-tab-font-size); letter-spacing: 0.02em; }
.hm-sw-footer-tabs__list { display: contents; }
.hm-sw-footer-tabs__add { flex: 0 0 24px; width: 24px; height: 22px; background: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat; }
.hm-sw-footer-tabs__add:hover:not(:disabled) { background-image: url("../components/sw-footer/assets/tab-add-hover.svg"); }
/* Hover (2026-10-20, user request): the Model / Layout orange surface in the button shape, the + keeps its outline. */
.hm-sw-footer-tabs__add { position: relative; }
.hm-sw-footer-tabs__add:hover:not(:disabled)::before {
content: "";
position: absolute;
inset: 0;
background: url("../components/sw-footer/assets/menu-add.svg") 50% 50% / 28px 12px no-repeat, var(--hm-sw-footer-gra-border-orange);
-webkit-mask: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat;
mask: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat;
}
.hm-sw-footer-tab { position: relative; flex: 0 0 auto; display: flex; height: 22px; color: var(--hm-sw-footer-tab-text); }
.hm-sw-footer-tab__select {
position: relative;
@@ -431,7 +461,8 @@
.hm-sw-footer-tab[data-shape="rounded"][data-state="on"] { background: var(--hm-sw-footer-tab-on-background); }
.hm-sw-footer-tab[data-shape="rounded"][data-state="editing"] { background: var(--hm-sw-footer-tab-editing-background); }
.hm-sw-footer-tab[data-shape="rounded"]:is(:hover, [data-state="editing"])::after { border-color: var(--hm-sw-footer-tab-hover-border-color); }
.hm-sw-footer-tab[data-shape="rounded"][data-state="off"]:hover { background: linear-gradient(var(--hm-sw-footer-tab-hover-overlay), var(--hm-sw-footer-tab-hover-overlay)), var(--hm-sw-footer-tab-background); }
/* Hover, not selected (2026-10-20, user request): the Model orange surface; text as on Model (below). */
.hm-sw-footer-tab[data-shape="rounded"][data-state="off"]:hover { background: var(--hm-sw-footer-gra-border-orange); }
/* Slanted tab (layout01, next to Model): 97 × 22 mirrored bg asset + the 28px red close piece. */
.hm-sw-footer-tab[data-shape="slant"] { width: 97px; }
@@ -450,7 +481,12 @@
.hm-sw-footer-tab[data-shape="slant"] .hm-sw-footer-tab__remove:hover { background-image: url("../components/sw-footer/assets/tab-close-hover.svg"); }
.hm-sw-footer-tab[data-shape="slant"][data-state="on"]::before { background-image: url("../components/sw-footer/assets/tab-slant-on.svg"); }
.hm-sw-footer-tab[data-shape="slant"][data-state="editing"]::before { background-image: url("../components/sw-footer/assets/tab-slant-editing.svg"); }
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-hover.svg"); }
/* Hover, not selected (2026-10-20, user request): the Model orange surface in the slanted shape. */
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::before {
background: var(--hm-sw-footer-gra-border-orange);
-webkit-mask: url("../components/sw-footer/assets/tab-slant.svg") 0 0 / 97px 22px no-repeat;
mask: url("../components/sw-footer/assets/tab-slant.svg") 0 0 / 97px 22px no-repeat;
}
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::after { background-image: url("../components/sw-footer/assets/tab-slant-ring.svg"); }
/* layout01 Variant6 (editing + hover): the fill without its own ring and the orange ring on top. */
.hm-sw-footer-tab[data-shape="slant"][data-state="editing"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-editing-fill.svg"); }
@@ -458,7 +494,9 @@
.hm-sw-footer-tab[data-shape="slant"] + .hm-sw-footer-tab--model { margin-left: -9px; }
/* Text per state (Figma layout01 / layout02 variants). */
.hm-sw-footer-tab:is([data-state="on"], [data-state="editing"], :hover) .hm-sw-footer-tab__select {
/* Selected / editing Layout tabs (light text on brown / black) keep the 70% outline. Hover of a tab that is not
selected and the Model tab draw their text exactly as the Default (2026-10-20): only the surface changes. */
.hm-sw-footer-tab:not(.hm-sw-footer-tab--model):is([data-state="on"], [data-state="editing"]) .hm-sw-footer-tab__select {
text-shadow:
1.3px 0 0 var(--hm-sw-footer-tab-outline-color), 0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
0 1.3px 0 var(--hm-sw-footer-tab-outline-color), -0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
@@ -467,12 +505,13 @@
}
.hm-sw-footer-tab[data-state="on"] { color: var(--hm-sw-footer-text); }
.hm-sw-footer-tab[data-state="editing"] { color: var(--hm-sw-footer-red); }
.hm-sw-footer-tab[data-shape="rounded"]:not([data-state="editing"]):hover,
.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover,
.hm-sw-footer-tab--model:hover:not([data-state="on"]) { color: var(--hm-sw-footer-accent); }
/* layout01 hover (not selected): orange tab, black text with the 70% outline. */
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover { color: #000; }
.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover .hm-sw-footer-tab__select { text-shadow: none; }
.hm-sw-footer-tab[data-shape="rounded"][data-state="on"]:hover,
.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover { color: var(--hm-sw-footer-accent); }
/* On the orange surface (Model selected or hovered, Layout hovered, 2026-10-20 user decision): the Default tab text,
black #161410 without outline, in the inherited tab size and weight (no size or weight of its own), so hover never
changes the text, its size or its place. */
.hm-sw-footer-tab:is([data-shape="rounded"], [data-shape="slant"])[data-state="off"]:hover,
.hm-sw-footer-tab--model:is([data-state="on"], :hover) { color: var(--hm-sw-footer-tab-text); }
/* layout01 "on hover" draws the default beige surface under the orange text. */
.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant.svg"); }
/* The × appears on hover (all shapes) and in no other state (Figma opacity 0). */
@@ -481,7 +520,18 @@
/* Model (26:9914): 73 × 22 asset, label 22px from the left. */
.hm-sw-footer-tab--model { width: 73px; background: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat; }
.hm-sw-footer-tab--model[data-state="on"] { background-image: url("../components/sw-footer/assets/tab-model-on.svg"); }
/* Selected and hovered (2026-10-20, user request; was the brown model On 26:9925): the gra-border-orange surface in the
Model shape. */
.hm-sw-footer-tab--model:is([data-state="on"], :hover) { background-image: none; }
.hm-sw-footer-tab--model:is([data-state="on"], :hover)::before {
content: "";
position: absolute;
inset: 0;
background: var(--hm-sw-footer-gra-border-orange);
-webkit-mask: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat;
mask: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat;
pointer-events: none;
}
.hm-sw-footer-tab--model .hm-sw-footer-tab__select { min-width: 0; width: 100%; padding: 0 16px 0 22px; }
/* ---------- Command line ---------- */