feat(sw): add remaining component theme tokens
Add nine component tokens declared on the outermost SW scope. Each defaults to the token or literal it replaces, so the default look and header theme inheritance are unchanged; setting one changes its component alone. - Viewer Header menus (logo menu, header dropdowns, More): --hm-sw-viewer-header-menu-background / -border-color / -shadow / -item-hover-background (default: --hm-sw-header-more-*) - SWHeader K guide: --hm-sw-header-k-guide-border-color (default var(--hm-sw-property-border)) / -background (#0e3c2e) - Popup value color: --hm-sw-popup-value-color (default var(--hm-sw-header-input-color)); the property bar keeps the header token - Footer command history scrollbar: --hm-sw-footer-command-scrollbar-thumb (#574b30) / -track (transparent) Footer focus ring, side shadow, shared text color and dividers stay shared. Docs (DESIGN_RULES, AI_USAGE, VIEWER, header design spec) and theme-inheritance section 1d updated.
This commit is contained in:
1 parent
28e00f2870
commit
228d8872fc
8 files changed
+174
-23
No files matched your search
@@ -107,7 +107,7 @@ import "@hm-design/sw/styles.css" // 앱 진입점에서 한 번
|
||||
- SW 화면은 `SWTheme`(또는 SW 컴포넌트 루트)와 SW 토큰의 글꼴을 그대로 쓴다. Web UI도 Noto Sans KR이지만 Web 토큰(`--hm-font-family-base`)이나 Web `theme.css`의 글꼴 설정을 SW 화면에 복사하지 않고, SW 컴포넌트에 `font-family`를 개별 지정하지 않는다. 프로그램(사용자)이 다른 글꼴을 정한 경우에만 §3.1 방법으로 `--hm-sw-header-font-family`를 바꾸고 결과 보고에 "글꼴 변경"으로 적는다.
|
||||
- Weight 범위(2026-10-20 사용자 확정): SWHeader 안의 필드 값은 400, Composed Controls(SWHeader 밖에 단독 배치한 `SWHeaderLayerMenu` 등)의 필드 값은 700. 파일명·Footer 보조기능/명령어 제목·Footer 분류 탭·Viewer Header 파일명/버튼 라벨/Model·Layout·최근파일 이름/경로/미리보기 제목, Footer Model/Layout 탭 라벨(모든 상태, 2026-10-22 사용자 확정, 이름 편집 입력은 400)은 700, Footer `전체보기`·명령·보조기능 라벨은 400. 임의로 일괄 변경하지 않는다. Figma 고정 폭 칸(예: 가중치·스케일 38px)에 그보다 긴 값(예: `ByLayer`)이 들어가면 말줄임 + `title`이 된다. Figma 레이어 이름의 `Dotum/bold/14`를 보고 700으로 바꾸거나 겹침·외곽선을 따로 만들지 않는다.
|
||||
- CSS는 전역(`html`, `body`, `*`)을 건드리지 않는다. `body` margin 등 페이지 기본값은 소비 앱이 정한다.
|
||||
- 스크롤바: SW 전용 스크롤바 디자인은 없다. 기존 SW 컴포넌트는 브라우저 기본 스크롤바를 쓰며(속성Bar만 `scrollbar-width: thin`), Popup 본문 스크롤은 `SWPopup`이 처리한다. 새 스크롤 영역에 임의 스크롤바 색·두께를 만들지 않는다.
|
||||
- 스크롤바: 일반 스크롤바 디자인은 없다. 패키지가 정한 곳만 `scrollbar-width: thin`이다 — 속성Bar, Popup 본문(`SWPopup`·`SWViewerPanel`·속성창, `--hm-sw-popup-scrollbar-thumb`·`-track`), Footer 명령창 기록(`--hm-sw-footer-command-scrollbar-thumb`·`-track`, 2026-11-10). 그 밖의 SW 컴포넌트는 브라우저 기본 스크롤바를 쓴다. 새 스크롤 영역에 임의 스크롤바 색·두께를 만들지 않는다.
|
||||
- TypeScript에서 CSS side-effect import 오류가 나면 Vite의 `vite/client` 타입을 포함한다.
|
||||
|
||||
## 3. 스타일 규칙
|
||||
@@ -138,6 +138,12 @@ SW 토큰(`--hm-sw-header-*`, `--hm-sw-property-*`, `--hm-sw-popup-*`, `--hm-sw-
|
||||
- 다른 토큰을 참조하는 토큰(예: `--hm-sw-viewer-panel-background` = `var(--hm-sw-property-surface)`)은 가장 바깥 범위에서 계산됩니다. 참조되는 토큰을 바꿀 때도 가장 바깥 범위에서 바꿉니다.
|
||||
- Step Header(`SWProcessHeader`, 2026-11-10): 칠하는 SWHeader 토큰 18개를 `--hm-sw-process-*` alias(기본값 `var(--hm-sw-header-…)`)로 읽습니다. 아무것도 정하지 않으면 SWHeader 테마를 따르고, `--hm-sw-process-selected-color` 등을 가장 바깥 범위에 정하면 Step Header만 바뀝니다. 위 규칙대로 안쪽 요소에서 바꾼 `--hm-sw-header-*`는 이 alias에 전달되지 않습니다. 목록·공유 유지 토큰은 [DESIGN_RULES.md](./DESIGN_RULES.md) §14.
|
||||
- Viewer Header(`SWViewerHeader`, 2026-11-10): 파일명·객체 수정·속성 면의 SWHeader 토큰 10개를 `--hm-sw-viewer-document-*`·`--hm-sw-viewer-object-*`·`--hm-sw-viewer-property-*` alias(기본값 `var(--hm-sw-header-…)`)로 읽습니다. 기본은 SWHeader 테마 공유 그대로이고, 가장 바깥 범위에 `--hm-sw-viewer-*`를 정하면 Viewer Header만 바뀝니다. 안쪽 요소에서 바꾼 `--hm-sw-header-*`는 이 alias에 전달되지 않습니다. 목록·적용 범위는 [DESIGN_RULES.md](./DESIGN_RULES.md) §11.
|
||||
- 컴포넌트 전용 색 토큰(2026-11-10, 값 변경 없음): 아래 9개는 같은 방식(가장 바깥 범위에서 정함, 기본값은 기존 토큰 또는 기존 값)이며, 정하지 않으면 지금 모양 그대로이고 정하면 해당 부분만 바뀝니다.
|
||||
- Viewer Header 메뉴(로고 메뉴·Header 안 Dropdown·More): `--hm-sw-viewer-header-menu-background`·`-border-color`·`-shadow`·`-item-hover-background`(기본 SWHeader `--hm-sw-header-more-*`). SWHeader `...` 메뉴는 그대로입니다. [DESIGN_RULES.md](./DESIGN_RULES.md) §11.
|
||||
- SWHeader K 가이드 패널: `--hm-sw-header-k-guide-border-color`(기본 `var(--hm-sw-property-border)`)·`--hm-sw-header-k-guide-background`(`#0e3c2e`). 속성창 테두리는 그대로입니다. §5.
|
||||
- Popup 값 글자색: `--hm-sw-popup-value-color`(기본 `var(--hm-sw-header-input-color)`). 속성Bar 값은 그대로입니다. §8.
|
||||
- Footer 명령창 기록 스크롤바: `--hm-sw-footer-command-scrollbar-thumb`(`#574b30`)·`-track`(`transparent`). §13.
|
||||
- 공유 유지(전용 토큰 없음): Focus 링(`--hm-sw-header-focus-color`, Footer 포함), 글자색·글자 외곽선, Viewer 메뉴 구분선.
|
||||
|
||||
## 4. 판단 기록 남기기
|
||||
|
||||
|
||||
Reference in new issue
Block a user