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:
1 parent
033e24246a
commit
ef69f5143b
9 files changed
+205
-38
No files matched your search
@@ -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><SWTheme></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><SWTheme></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>
|
||||
|
||||
Reference in new issue
Block a user