fix(sw): align header gradient borders with Figma
Deploy Storybook / deploy (push) Successful in 1m14s
Deploy Storybook / deploy (push) Successful in 1m14s
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
1 parent
4c29894e56
commit
1d206c86cf
5 files changed
+53
-31
No files matched your search
@@ -266,19 +266,21 @@ Figma Plugin API로 26:8944와 메뉴 8개·문서·레이어 Component Set의
|
||||
| `--hm-sw-header-hover-border-gradient` | 180deg `#A67D03` 0% → `#F2CC0F` 16.41% → `#FADD4F` 37.19% → `#F2CC0F` 62.03% → `#926E03` 87.88% | Figma `header/btn_home` hover 테두리(26:10655) |
|
||||
| `--hm-sw-header-document-background` | 사용자 확정 180deg gradient(§10 B) | 사용자 확정 = Figma 동일 |
|
||||
| `--hm-sw-header-object-background` | 사용자 확정 0deg gradient(§10 A) | 사용자 확정 = Figma 동일 |
|
||||
| `--hm-sw-header-document-border-gradient` | 180deg `#0E4C3A` 0% → `#041611` 13.73% → `#041611` 89.51% → `#18503F` 100% | Figma 26:10374 Rectangle 6671 Stroke(Plugin API, 2026-10-23) |
|
||||
| `--hm-sw-header-object-border-gradient` | 180deg `#135643` 0% → `#0E3D2F` 13.57% → `#34DAAA` 37.06% → `#08241C` 80.5% → `#1F5E4B` 100% | Figma 26:10375 Rectangle 7428 Stroke(Plugin API, 2026-10-23) |
|
||||
| `--hm-sw-header-property-background` | 사용자 확정 반투명 검정 gradient(§10 C) | 사용자 확정 = Figma 동일 |
|
||||
| `--hm-sw-header-pill-background` | `rgba(0,0,0,0.8)` | Figma `Rectangle 6959` |
|
||||
| `--hm-sw-header-stripe-color` | `rgba(28,106,81,0.32)` | Figma 창 이동 줄무늬 |
|
||||
| `--hm-sw-header-window-icon-color` | `#ADB0AF` | Figma 최소화 막대 |
|
||||
|
||||
창 영역(`Rectangle 6669`)과 인쇄 버튼은 파일명 gradient·테두리를 Figma 그대로 재사용합니다.
|
||||
창 영역(`Rectangle 6669`)과 인쇄 버튼은 파일명 면 gradient와 단색 테두리(`--hm-sw-header-document-border-color`)를 재사용합니다. 파일명 면 자체의 gradient Stroke(`-document-border-gradient`)는 쓰지 않습니다.
|
||||
|
||||
## 8. Border · Radius · Shadow
|
||||
|
||||
| 면 | Border | Radius | Shadow |
|
||||
|---|---|---|---|
|
||||
| 파일명 | 위·오른쪽·아래 1px `#0E4C3A`, 왼쪽 0 | 0 | none |
|
||||
| 객체 수정 | 1px `#135643` | 6px | none |
|
||||
| 파일명 | 위·오른쪽·아래 1px 세로 gradient Stroke(`--hm-sw-header-document-border-gradient`), 왼쪽 0 | 0 | none |
|
||||
| 객체 수정 | 1px 세로 gradient Stroke(`--hm-sw-header-object-border-gradient`, `#34DAAA` 하이라이트) | 6px | none |
|
||||
| 속성 필드(5개 메뉴, 더보기 버튼) | 1px `#08251C` | 3px | `0 1px 4px 0 rgba(9,39,30,.7)` |
|
||||
| 창 영역 | 1px `#0E4C3A`(4면, pseudo) | 0 | none |
|
||||
| 인쇄·가이드 pill | 1px `#092920` | 4px | inset `0 2px 2px rgba(0,0,0,.25)` |
|
||||
@@ -334,23 +336,27 @@ SW Header는 여러 SW 프로그램이 공통으로 사용합니다. 따라서 *
|
||||
|
||||
| 기존 뷰어 class | 신규 class | 토큰 |
|
||||
|---|---|---|
|
||||
| A `.cad-toolbar-object-area` | `.hm-sw-header__object-area` | `--hm-sw-header-object-background`, `-object-border-color`, `-object-radius` |
|
||||
| B `.cad-toolbar-document` | `.hm-sw-header__document` | `--hm-sw-header-document-background`, `-document-border-color` |
|
||||
| A `.cad-toolbar-object-area` | `.hm-sw-header__object-area` | `--hm-sw-header-object-background`, `-object-border-gradient`(2026-10-23, 이전 `-object-border-color`), `-object-radius` |
|
||||
| B `.cad-toolbar-document` | `.hm-sw-header__document` | `--hm-sw-header-document-background`, `-document-border-gradient`(2026-10-23, 이전 `-document-border-color`) |
|
||||
| C `.cad-toolbar-property-field` | `.hm-sw-header__field` | `--hm-sw-header-property-background`, `-property-border-color`, `-property-radius`, `-property-shadow` |
|
||||
|
||||
```css
|
||||
/* A. 객체 수정 */
|
||||
border-radius: 6px; border: 1px solid #135643; box-shadow: none;
|
||||
background: linear-gradient(0deg, #144838 0%, #1A4536 6%, #1F4134 10%, #10392D 18%, #296B55 72%, #1F5A47 83%, #144838 92%, #124133 100%);
|
||||
/* B. 파일명 */
|
||||
border-radius: 0; border-top/right/bottom: 1px solid #0E4C3A; border-left: 0; box-shadow: none;
|
||||
background: linear-gradient(180deg, #081813 0%, #09271E 8.69%, #0B3227 25.43%, #0E3D2F 51.25%, #0B3227 80.03%, #0A2B21 89.76%, #081813 100%);
|
||||
/* A. 객체 수정 — 테두리: 2026-10-23 Figma gradient Stroke (아래 참고) */
|
||||
border-radius: 6px; border: 1px solid transparent; box-shadow: none;
|
||||
background: linear-gradient(0deg, #144838 0%, #1A4536 6%, #1F4134 10%, #10392D 18%, #296B55 72%, #1F5A47 83%, #144838 92%, #124133 100%) padding-box,
|
||||
linear-gradient(180deg, #135643 0%, #0E3D2F 13.57%, #34DAAA 37.06%, #08241C 80.5%, #1F5E4B 100%) border-box;
|
||||
/* B. 파일명 — 테두리: 2026-10-23 Figma gradient Stroke (아래 참고) */
|
||||
border-radius: 0; border-top/right/bottom: 1px solid transparent; border-left: 0; box-shadow: none;
|
||||
background: linear-gradient(180deg, #081813 0%, #09271E 8.69%, #0B3227 25.43%, #0E3D2F 51.25%, #0B3227 80.03%, #0A2B21 89.76%, #081813 100%) padding-box,
|
||||
linear-gradient(180deg, #0E4C3A 0%, #041611 13.73%, #041611 89.51%, #18503F 100%) border-box;
|
||||
/* C. 속성 입력 */
|
||||
border-radius: 3px; border: 1px solid #08251C; box-shadow: 0 1px 4px 0 rgba(9, 39, 30, 0.70);
|
||||
background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) 26.41%, rgba(0,0,0,.40) 70%, rgba(0,0,0,.45) 100%);
|
||||
```
|
||||
|
||||
세 값은 Figma `get_design_context`의 해당 레이어 값과도 일치합니다(Figma 26.407% → 확정 26.41%). C의 반투명 검정은 A 위에서 합성되는 것이 의도입니다.
|
||||
면(fill) 값은 Figma `get_design_context`의 해당 레이어 값과도 일치합니다(Figma 26.407% → 확정 26.41%). C의 반투명 검정은 A 위에서 합성되는 것이 의도입니다.
|
||||
|
||||
**테두리 갱신(2026-10-23, 사용자 승인).** 이전 확정값 A `1px solid #135643`, B `1px solid #0E4C3A`는 `get_design_context`가 gradient Stroke를 첫 색 하나로 줄여 보여준 값이었습니다. Plugin API로 읽은 실제 Stroke는 두 면 모두 INSIDE 세로 linear gradient입니다(B: 4-stop, 위·오른쪽·아래 1px, 왼쪽 0 / A: 5-stop `#34DAAA` 하이라이트, 4면 1px, radius 6). 1px 테두리를 투명으로 남기고 Stroke를 border-box 배경 층으로 그리므로 두께·위치·radius·padding·글자 위치는 그대로입니다. 단색 토큰 `-document-border-color`·`-object-border-color`는 호환성과 홈 뒤 면·창 영역·인쇄 버튼·메뉴의 단색 선에 계속 씁니다(파일명 면·객체 수정 면에는 쓰지 않음). Figma에는 Open 배치가 없어, Open 뒤 파일명의 왼쪽 가장자리도 Figma처럼 Stroke 없이 둡니다(2px 간격만).
|
||||
|
||||
## 11. 선택 · Focus · Hover · Disabled
|
||||
|
||||
@@ -567,8 +573,10 @@ Composed Controls의 기존 레이어·색상·상세보기 예제는 보존하
|
||||
| `--hm-sw-header-layer-icon-hover-background` | `rgba(0,0,0,.25)` | 전구 Hover(눈꽃·자물쇠는 Hover SVG) |
|
||||
| `--hm-sw-header-layer-chip-border-color` | `#C9C9C9` | 레이어 색상 견본 테두리 |
|
||||
| `--hm-sw-header-layer-footer-border-color` / `-layer-detail-background` / `-layer-detail-color` / `-layer-detail-text-opacity` | `rgba(197,177,158,.15)` / `rgba(197,177,158,.15)` / `#FFF` / .35 | 레이어 상세 영역·버튼 |
|
||||
| `--hm-sw-header-document-background` / `-document-border-color` | §10 B / `#0E4C3A` | 파일명, 홈 뒤, 창 영역, 인쇄 버튼 |
|
||||
| `--hm-sw-header-object-background` / `-object-border-color` / `-object-radius` | §10 A / `#135643` / 6px | 객체 수정 면, 더보기 메뉴 테두리 |
|
||||
| `--hm-sw-header-document-background` / `-document-border-color` | §10 B / `#0E4C3A` | 파일명 면, 홈 뒤, 창 영역, 인쇄 버튼(단색 선: 홈 뒤·창 영역) |
|
||||
| `--hm-sw-header-document-border-gradient` | §7 | 파일명 면 테두리(SW Header·Viewer, Open 면 포함) |
|
||||
| `--hm-sw-header-object-background` / `-object-border-color` / `-object-radius` | §10 A / `#135643` / 6px | 객체 수정 면, 더보기 메뉴 테두리(단색) |
|
||||
| `--hm-sw-header-object-border-gradient` | §7 | 객체 수정 면 테두리(SW Header·Viewer, Viewer 끝 둥근 면 포함) |
|
||||
| `--hm-sw-header-property-background` / `-property-border-color` / `-property-radius` / `-property-shadow` | §10 C / `#08251C` / 3px / §10 C | 5개 필드, 더보기 버튼 |
|
||||
| `--hm-sw-header-pill-background` / `-pill-border-color` | `rgba(0,0,0,.8)` / `#092920` | 인쇄·가이드 pill |
|
||||
| `--hm-sw-header-stripe-color` | `rgba(28,106,81,.32)` | 창 이동 줄무늬 |
|
||||
|
||||
Reference in new issue
Block a user