diff --git a/A00_Common/design/design_profile_overlays.ts b/A00_Common/design/design_profile_overlays.ts index eb60de408..235596d52 100644 --- a/A00_Common/design/design_profile_overlays.ts +++ b/A00_Common/design/design_profile_overlays.ts @@ -28,8 +28,8 @@ export function createProfileOverlays(deps: ProfileOverlaysDeps) { /** 유토곡선 총괄값 — **그래프 좌측 상단 배지**가 보인다(2026-09-06 사용자 지시). * 유토곡선을 접어도 이 값은 남아야 한다. */ const massBadge = createMassHaulBadge(); - // 그래프 위에 도구줄(상단줄)이 한 줄 있다 — 그 아래로 내려 겹치지 않게 한다. - massBadge.root.style.setProperty("--mass-haul-badge-top", "34px"); + // 그래프 위 도구줄 · 측점 ▲ 줄(바닥 47px) 아래로 내려 겹치지 않게 한다(289). + massBadge.root.style.setProperty("--mass-haul-badge-top", "52px"); bodyWrap.append(massBadge.root); let massHaulSummary: MassHaulSummaryValues | null = null; // 유토 배분은 **서버가 만든다**(2026-09-06) — 편집이 멈추면 뒤에서 받아 두고, 도착하면 diff --git a/common_util/common_util_mass_haul.css b/common_util/common_util_mass_haul.css index 74b2e1276..4ecc1abde 100644 --- a/common_util/common_util_mass_haul.css +++ b/common_util/common_util_mass_haul.css @@ -386,13 +386,14 @@ display: inline-flex; align-items: center; gap: var(--spacing-4, 4px); - padding: 2px var(--spacing-8, 8px); + /* 큰 알약(289) — 글자 · 여백 한 단 위 */ + padding: var(--spacing-4, 4px) var(--spacing-12, 12px); border: 1px solid var(--color-border); border-radius: var(--radius-pills, 999px); background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent); color: var(--color-text-body); - font-size: var(--text-caption); - line-height: 1.3; + font-size: var(--pill-font-size-lg); + line-height: var(--leading-body-sm); white-space: nowrap; pointer-events: auto; } diff --git a/resources/tester/test_289_1_mass_badge_size.py b/resources/tester/test_289_1_mass_badge_size.py new file mode 100644 index 000000000..9a9a62861 --- /dev/null +++ b/resources/tester/test_289_1_mass_badge_size.py @@ -0,0 +1,39 @@ +"""289 종단도 누가토량 알약 크게 · 측점 ▲ 줄 아래로. + +- 테마 토큰 `--pill-font-size-lg` = 글자 한 단 위(14px · 공용 알약 12px) +- 배지(B05 · B06 한 벌 `common_util_mass_haul.css`) = 토큰 글자 · 줄 간격 · 여백 4/12 +- 자리 = 위에서 52px(▲ 줄 바닥 47px 아래 · 잰 값) · 종단 오버레이 한 곳(`design_profile_overlays.ts`) +""" + +import re +from pathlib import Path + +ROOT = Path(__file__).resolve().parents[2] + + +def _read(rel: str) -> str: + return (ROOT / rel).read_text(encoding="utf-8") + + +def _block(css: str, selector: str) -> str: + m = re.search(re.escape(selector) + r"\s*\{([^}]*)\}", css) + assert m, selector + return m.group(1) + + +def test_token_one_step_up(): + theme = _read("ui_template/ui_template_theme.css") + assert "--pill-font-size-lg: var(--text-body-sm);" in theme + + +def test_badge_uses_large_pill(): + badge = _block(_read("common_util/common_util_mass_haul.css"), ".mass-haul-badge") + assert "font-size: var(--pill-font-size-lg)" in badge + assert "line-height: var(--leading-body-sm)" in badge + assert "padding: var(--spacing-4, 4px) var(--spacing-12, 12px)" in badge + + +def test_badge_below_up_buttons(): + overlays = _read("A00_Common/design/design_profile_overlays.ts") + m = re.search(r'"--mass-haul-badge-top", "(\d+)px"', overlays) + assert m and int(m.group(1)) > 47 # 측점 ▲ 줄 바닥(top 30 + 17) diff --git a/ui_template/ui_template_theme.css b/ui_template/ui_template_theme.css index 3e4bc4590..c670ebc04 100644 --- a/ui_template/ui_template_theme.css +++ b/ui_template/ui_template_theme.css @@ -170,6 +170,8 @@ --btn-bar-font-size: var(--text-caption); /* 보조 탭 단추 높이 — B08 · B09 보조 탭 줄(.ui-subtabs) 한 꼴 */ --subtab-height: 24px; + /* 큰 알약 글자 — 공용 알약(.ui-tag · 12px) 한 단 위 · 종단 누가토량 배지가 씀 */ + --pill-font-size-lg: var(--text-body-sm); /* --------------------------------------------------------------------------- * 6. 그림자 (Shadows) — 블루틴트, 서브틀 (최대 32px blur / 6% opacity)