feat(sw): refine viewer model layout design and theme tokens
Deploy Storybook / deploy (push) Successful in 1m13s

- Model / Layout tabs follow Figma 7652:40344: gradient faces, gold / green
  gradient borders, blurred outline, inner shadow and top gloss, with every
  color in its own --hm-sw-viewer-tab(s)-* token (consumer-overridable)
- Box height matches the adjacent field group (42px, from the control height
  token); padding 1px 1px 1.5px, button side padding 5px, 1px right margin
  for a tabs-only first group; 378px max width, equal buttons and the
  measured More steps are unchanged; existing text-shadow kept
- Storybook: SW/Viewer > Model / Layout story (states and token override);
  Logo story listed before Responsive More
- AI docs (VIEWER.md, DESIGN_RULES.md) and viewer / text-weight test
  expectations updated
This commit is contained in:
shkim4 committed 2026-10-23 16:27:41 +09:00
1 parent 7a5236f3ad
commit 325ec25e37
6 files changed
+197 -56

No files matched your search

+2 -1
View File
@@ -152,7 +152,8 @@ const labels = vNames.map(v => v.text)
check('Viewer: file name, 파일 열기, 전체 보기 · 레이어 · 설정 · 속성, Model · Layout are 14px 700 + 1.3px outline', want.every(w => labels.includes(w)) && labels.some(t => t.startsWith('Model')) && labels.some(t => t.startsWith('Layout')) && vNames.every(v => v.weight === '700' && v.size === '14px' && v.outline === OUTLINE_14), vNames)
check('Viewer: 샘플 is no longer a header label', !labels.includes('샘플'), labels)
const counts = await styles('.hm-sw-viewer-header >> nth=0 >> .hm-sw-viewer-header__count')
check('Viewer: tab counts keep 11px 400', counts.length > 0 && counts.every(c => c.weight === '400' && c.size === '11px'), counts)
// 2026-10-23 Figma 7652:40344: counts are 14px (the name's size), still 400 with the 1px outline.
check('Viewer: tab counts 14px 400 (Figma 7652:40344)', counts.length > 0 && counts.every(c => c.weight === '400' && c.size === '14px'), counts)
// File open button (파일 열기, the logo menu is gone): hover keeps its label in place, size and weight.
const openButton = vh.locator('[data-document-open]')
await stableOnHover('Viewer 파일 열기', openButton, openButton.locator('.hm-sw-viewer-header__open-label'))
+2 -2
View File
@@ -82,8 +82,8 @@ if (reference && reference !== '-') {
await page.close()
}
// 2026-10-23: the Model / Layout buttons share one width (their field face widens up to 378px with room), so they and
// their field are left out of the size comparison with the reference; height and look are unchanged.
check('geometry tabs: equal widths, 40px high', comparison.package.tab.length === 2 && comparison.package.tab.every(item => item.h === 40 && Math.abs(item.w - comparison.package.tab[0].w) <= 1), comparison.package.tab.map(item => `${item.w}x${item.h}`).join(' '))
// their field are left out of the size comparison with the reference. Height: the box matches the field group (42px), so the buttons are 37.5px (margin 1px top and sides, 1.5px bottom; geometry rounds to 38).
check('geometry tabs: equal widths, 37.5px high (box = field group 42px)', comparison.package.tab.length === 2 && comparison.package.tab.every(item => item.h === 38 && Math.abs(item.w - comparison.package.tab[0].w) <= 1), comparison.package.tab.map(item => `${item.w}x${item.h}`).join(' '))
if (comparison.reference) {
// Same item = same size (positions shift with the file-name text width, which differs by sample data).
const noTabs = items => items.filter(item => !item.text.startsWith('Model'))