test(sw): align browser tests and theme story with Noto Sans KR and Bold

Font expectations move back to Noto Sans KR (Dotum becomes the theme
inheritance verification value), viewer labels expect 700, and the new
text-weight.browser.mjs checks the requested Bold scope and outlines.
This commit is contained in:
shkim4 committed 2026-10-20 18:17:50 +09:00
1 parent 033e24246a
commit ef69f5143b
9 files changed
+205 -38

No files matched your search

+7 -7
View File
@@ -14,9 +14,9 @@ import "./sw-viewer-stories.css"
// SW theme token inheritance (2026-10-20). The official way to change SW tokens: set them through `style` (or the
// consumer's own class) on the OUTERMOST SW scope — <SWTheme> around the screen, or the component root when it is
// used alone. Nested SW roots (viewer menus, More, panels, footer command line) inherit the value.
// The SW default font is Dotum (2026-10-20). Noto Sans KR is used here ONLY to make the inheritance visible.
// Dotum is used here ONLY to make the inheritance visible: the SW default font is Noto Sans KR (2026-10-20 decision).
const KICKER = "HM DESIGN SYSTEM / SW"
const VERIFY_FONT = '"Noto Sans KR", sans-serif'
const VERIFY_FONT = 'Dotum, "돋움", sans-serif'
const VERIFY_THEME = { "--hm-sw-header-font-family": VERIFY_FONT } as CSSProperties
const NESTED_THEME = { "--hm-sw-header-font-family": '"Malgun Gothic", sans-serif' } as CSSProperties
@@ -77,8 +77,8 @@ export const ThemeInheritance: Story = {
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="SW — 테마 토큰 상속"
description={<>SW 토큰은 가장 바깥 SW 범위(<code>&lt;SWTheme&gt;</code> 또는 단독 컴포넌트 루트)에서 한 번 선언되고, 안쪽 Dropdown·More·패널·명령창은 그 값을 상속합니다. 토큰은 가장 바깥 범위의 <code>style</code>로만 바꿉니다. SW 기본 글꼴은 Dotum이며, 아래 Noto Sans KR은 <strong>상속 확인용 검증 값</strong>입니다.</>} />
<StorySection title="1. 기본 (테마 지정 없음)" description="단독 SWViewerHeader. 기본 글꼴 Dotum. 1000px 폭이라 일부 항목이 More(⋯)로 이동합니다.">
description={<>SW 토큰은 가장 바깥 SW 범위(<code>&lt;SWTheme&gt;</code> 또는 단독 컴포넌트 루트)에서 한 번 선언되고, 안쪽 Dropdown·More·패널·명령창은 그 값을 상속합니다. 토큰은 가장 바깥 범위의 <code>style</code>로만 바꿉니다. 아래 Dotum은 <strong>상속 확인용 검증 값</strong>이며 SW 기본 글꼴(Noto Sans KR)은 바뀌지 않습니다(Dotum 기본 적용은 디자인 승인 대기).</>} />
<StorySection title="1. 기본 (테마 지정 없음)" description="단독 SWViewerHeader. 기본 글꼴 Noto Sans KR. 1000px 폭이라 일부 항목이 More(⋯)로 이동합니다.">
<ViewerArea width={1000} data-theme-case="default" />
</StorySection>
<StorySection title="2. 뷰어 모드 — SWTheme style로 글꼴 지정" description="<SWTheme style={{ '--hm-sw-header-font-family': … }}> 안의 Header·Dropdown·More·패널(내부 컨트롤 포함)이 같은 글꼴을 씁니다.">
@@ -105,10 +105,10 @@ export const ThemeInheritance: Story = {
</StorySection>
<StorySection title="5. 여러 테마 영역" description="옆 영역끼리 값이 섞이지 않고, 안쪽 SWTheme의 style은 그 안에서만 적용됩니다.">
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: 12 }}>
<SWTheme style={VERIFY_THEME} data-theme-case="area-a"><SWViewerHint>영역 A — 검증 글꼴(Noto Sans KR)</SWViewerHint></SWTheme>
<SWTheme data-theme-case="area-b"><SWViewerHint>영역 B — 기본(Dotum)</SWViewerHint></SWTheme>
<SWTheme style={VERIFY_THEME} data-theme-case="area-a"><SWViewerHint>영역 A — 검증 글꼴(Dotum)</SWViewerHint></SWTheme>
<SWTheme data-theme-case="area-b"><SWViewerHint>영역 B — 기본(Noto Sans KR)</SWViewerHint></SWTheme>
<SWTheme style={VERIFY_THEME} data-theme-case="area-c">
<SWViewerHint>영역 C 바깥 — Noto Sans KR</SWViewerHint>
<SWViewerHint>영역 C 바깥 — Dotum</SWViewerHint>
<SWTheme style={NESTED_THEME} data-theme-case="area-c-nested"><SWViewerHint>영역 C 안쪽 — Malgun Gothic</SWViewerHint></SWTheme>
</SWTheme>
</div>