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

fix(sw): align header gradient borders with Figma
Deploy Storybook / deploy (push) Successful in 1m14s

Browse Source 
The file-name and object-editing surfaces of SWHeader and SWViewerHeader
now draw the Figma gradient strokes (26:10374, 26:10375, read with the
Plugin API) through a transparent 1px border, so size, radius and text
position are unchanged. New tokens --hm-sw-header-document-border-gradient
and --hm-sw-header-object-border-gradient; the solid border colors stay
for compatibility and for the home, window area, print button and menus.

Update the SW Header design spec, the SW AI design rules and the example
layout CSS to the gradient borders.
This commit is contained in:
shkim4 committed 2026-10-23 00:28:12 +09:00
1 parent 4c29894e56
commit 1d206c86cf
5 files changed
+53 -31
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/sw/ai/DESIGN_RULES.md
+3 -3
View File
@@ -29,8 +29,8 @@
| 기본 글자 / 제목 | `#F6F4F2` / `#F0F7F5` | `--hm-sw-header-text-color` / `--hm-sw-header-title-color` |
| Selected·On·Hover 글자 | `#FFC600` | `--hm-sw-header-selected-color` |
| 화살표 | `#47AF91` | `--hm-sw-header-arrow-color` |
| 파일명 면 | 세로 gradient, 테두리 `#0E4C3A` | `--hm-sw-header-document-background`, `--hm-sw-header-document-border-color` |
| 객체 수정 면 | gradient, 테두리 `#135643`, radius 6px | `--hm-sw-header-object-background`, `-object-border-color`, `-object-radius` |
| 파일명 면 | 세로 gradient 면, 위·오른쪽·아래 1px 세로 gradient 테두리 `linear-gradient(180deg, #0E4C3A 0%, #041611 13.73%, #041611 89.51%, #18503F 100%)` | `--hm-sw-header-document-background`, `--hm-sw-header-document-border-gradient`(단색 `--hm-sw-header-document-border-color` `#0E4C3A`는 호환·단색 선용) |
| 객체 수정 면 | gradient 면, 1px 세로 gradient 테두리 `linear-gradient(180deg, #135643 0%, #0E3D2F 13.57%, #34DAAA 37.06%, #08241C 80.5%, #1F5E4B 100%)`, radius 6px | `--hm-sw-header-object-background`, `-object-border-gradient`, `-object-radius`(단색 `-object-border-color` `#135643`은 호환·메뉴 테두리용) |
| 속성 필드 면 | 검정 45–40% gradient, 테두리 `#08251C`, radius 3px, shadow `0 1px 4px rgba(9,39,30,.7)` | `--hm-sw-header-property-background`, `-property-border-color`, `-property-radius`, `-property-shadow` |
| 인쇄·K pill | `rgba(0,0,0,.8)`, 테두리 `#092920` | `--hm-sw-header-pill-background`, `-pill-border-color` |
| 문서 Dropdown | `#103127`, 테두리 `#041611` | `--hm-sw-header-document-menu-*` |
@@ -122,7 +122,7 @@
|---|---|---|
| `text` | 속성Bar·속성창 토글: 19px 행, 14px 700, 자간 0.04em, 묶음 위 12px 캡션, 버튼 사이 1px 구분선 | Hover·`pressed` 글자 `#FFC600`, 테두리·배경 변화 없음 |
| `pill` | 인쇄·K: pill(`rgba(0,0,0,.8)`, 1px `#092920`, radius 4px) 안 40 × 38 버튼, 아이콘 영역 24 × 23 | Hover 노란 gradient 링 + `hoverIcon`. 아이콘 색은 기존 인쇄 아이콘 `#B6D0C9` → Hover `#FFC600`(`--hm-sw-header-selected-color`) |
| `document` | 파일명 면: 48px, gradient 표면, 위·오른쪽·아래 1px `#0E4C3A`, 글자 `#F0F7F5` 700 · 자간 0.06em | 글자만 Hover `#FFC600`. Home 바로 뒤면 로고 사선 접점 공유, 그 뒤 파일명은 왼쪽 여백 12px |
| `document` | 파일명 면: 48px, gradient 표면, 위·오른쪽·아래 1px gradient 테두리(`--hm-sw-header-document-border-gradient`), 글자 `#F0F7F5` 700 · 자간 0.06em | 글자만 Hover `#FFC600`. Home 바로 뒤면 로고 사선 접점 공유, 그 뒤 파일명은 왼쪽 여백 12px |
## 10. 새 컴포넌트 체크리스트
packages/sw/ai/examples/example-layout.css
+3 -2
View File
@@ -18,9 +18,10 @@
flex: 1 1 0;
min-width: 0;
padding: 4px;
border: 1px solid var(--hm-sw-header-object-border-color);
/* The gradient stroke shows through the transparent 1px border, as on the SWHeader object area. */
border: 1px solid transparent;
border-radius: var(--hm-sw-header-object-radius);
background: var(--hm-sw-header-object-background);
background: var(--hm-sw-header-object-background) padding-box, var(--hm-sw-header-object-border-gradient) border-box;
}
/* Window-area surface for print / K / window buttons. */
.app-sw-window {
packages/sw/src/theme/sw-viewer.css
+9 -6
View File
@@ -115,9 +115,10 @@ button.hm-sw-viewer-header__brand { text-align: left; }
min-width: 56px;
height: calc(var(--hm-sw-viewer-height) - 2px);
padding: 0 16px 0 24px;
border: 1px solid var(--hm-sw-header-document-border-color);
/* SWHeader file-name surface: the Figma gradient stroke through the transparent top / right / bottom 1px. */
border: 1px solid transparent;
border-left: 0;
background: var(--hm-sw-header-document-background);
background: var(--hm-sw-header-document-background) padding-box, var(--hm-sw-header-document-border-gradient) border-box;
}
.hm-sw-viewer-header__document-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@@ -266,9 +267,10 @@ button.hm-sw-viewer-header__brand { text-align: left; }
height: calc(var(--hm-sw-viewer-height) - 2px);
gap: var(--hm-sw-viewer-gap);
padding-inline: var(--hm-sw-viewer-gap);
border: 1px solid var(--hm-sw-header-object-border-color);
/* SWHeader object surface: the Figma gradient stroke through the transparent 1px border. */
border: 1px solid transparent;
border-radius: var(--hm-sw-header-object-radius);
background: var(--hm-sw-header-object-background);
background: var(--hm-sw-header-object-background) padding-box, var(--hm-sw-header-object-border-gradient) border-box;
}
.hm-sw-viewer-header__group {
@@ -449,10 +451,11 @@ button.hm-sw-viewer-header__brand { text-align: left; }
.hm-sw-viewer-header .hm-sw-viewer-header__actions > :is(.hm-sw-viewer-status, .hm-sw-viewer-header__button, .hm-sw-header__window-buttons):not(:is(.hm-sw-viewer-status, .hm-sw-viewer-header__button, .hm-sw-header__window-buttons) + *)::after {
box-sizing: border-box;
width: var(--hm-sw-header-object-radius);
border: 1px solid var(--hm-sw-header-object-border-color);
/* The object surface end: its face and gradient stroke, spanning the same 1px-outset height so both line up. */
border: 1px solid transparent;
border-left: 0;
border-radius: 0 var(--hm-sw-header-object-radius) var(--hm-sw-header-object-radius) 0;
background: var(--hm-sw-header-object-background);
background: var(--hm-sw-header-object-background) padding-box, var(--hm-sw-header-object-border-gradient) border-box;
}
/* No line around the license / info button: the window buttons right after it drop their line before it. */
.hm-sw-viewer-header .hm-sw-viewer-header__actions > .hm-sw-viewer-header__button + .hm-sw-header__window-buttons { box-shadow: none; }
packages/sw/src/theme/sw.css
+16 -6
View File
@@ -131,10 +131,17 @@
/* User-confirmed: document (file name) surface */
--hm-sw-header-document-background: linear-gradient(180deg, #081813 0%, #09271e 8.69%, #0b3227 25.43%, #0e3d2f 51.25%, #0b3227 80.03%, #0a2b21 89.76%, #081813 100%);
--hm-sw-header-document-border-color: #0e4c3a;
/* Figma 26:10374 (Rectangle 6671) stroke, Plugin API 2026-10-23: vertical 4-stop gradient, INSIDE, top / right /
bottom 1px. The file-name surfaces draw it; the solid color above stays for compatibility and for the window
area, print button and menus that keep a plain 1px line. */
--hm-sw-header-document-border-gradient: linear-gradient(180deg, #0e4c3a 0%, #041611 13.73%, #041611 89.51%, #18503f 100%);
/* User-confirmed: object (editing) surface */
--hm-sw-header-object-background: linear-gradient(0deg, #144838 0%, #1a4536 6%, #1f4134 10%, #10392d 18%, #296b55 72%, #1f5a47 83%, #144838 92%, #124133 100%);
--hm-sw-header-object-border-color: #135643;
/* Figma 26:10375 (Rectangle 7428) stroke: vertical 5-stop gradient with the #34DAAA highlight, INSIDE, 1px on every
side. The object surfaces draw it; the solid color above stays for compatibility and for the menus. */
--hm-sw-header-object-border-gradient: linear-gradient(180deg, #135643 0%, #0e3d2f 13.57%, #34daaa 37.06%, #08241c 80.5%, #1f5e4b 100%);
--hm-sw-header-object-radius: 6px;
/* User-confirmed: property field surface */
@@ -381,11 +388,13 @@
padding: 0 12px 0 5px;
gap: 15px;
border-radius: 0;
border-top: 1px solid var(--hm-sw-header-document-border-color);
border-right: 1px solid var(--hm-sw-header-document-border-color);
border-bottom: 1px solid var(--hm-sw-header-document-border-color);
/* The 1px borders stay (transparent) so nothing moves; the Figma gradient stroke shows through them from the
border-box layer, the face fills the padding box as before. */
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
border-left: 0;
background: var(--hm-sw-header-document-background);
background: var(--hm-sw-header-document-background) padding-box, var(--hm-sw-header-document-border-gradient) border-box;
box-shadow: none;
color: var(--hm-sw-header-title-color);
font-weight: 700;
@@ -561,9 +570,10 @@
min-width: 0;
height: var(--hm-sw-header-bar-height);
padding: 4px 0;
border: 1px solid var(--hm-sw-header-object-border-color);
/* Figma gradient stroke through the transparent 1px border (same box, radius and padding). */
border: 1px solid transparent;
border-radius: var(--hm-sw-header-object-radius);
background: var(--hm-sw-header-object-background);
background: var(--hm-sw-header-object-background) padding-box, var(--hm-sw-header-object-border-gradient) border-box;
box-shadow: none;
}
/* Figma places the 90px mode cell and the 157px property block on the area's outer edge (over the 1px border). */