feat(734-1): 계산식 열 단추 낮은 단(20) · 옵션값 / 요소 연결 갈래 색 · 풍선 글

- 부품 상자 단추에 갈래 색(tone: option · link) 더함 — 공통 값(--color-warning · --color-info) 혼합 · 밝음 4.5 이상 · 어두움 6 이상
- 알약(요소 연결) · 입력 칩(옵션값) 24 → 20 · 마우스 풍선 「요소 연결」 · 「옵션」
- 지킴 시험 test_734_calc_buttons 새로

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

M01_MasterData/M01_MasterData_UI_LogicLab_Formula.ts

@@ -55,7 +55,8 @@ export function inputChip(
   const chip = createButton({
     label: `${spec.이름} ${shown}${spec.단위 ? ` ${spec.단위}` : ""}`,
     variant: "ghost",
-    size: 24,
+    size: 20,
+    tone: "option",
     onClick: (ev) => {
       ev.stopPropagation(); // 줄 누름(밝히기 고정)과 안 겹치게
       let over = false; // Enter 뒤 blur · 고름 뒤 blur 가 두 번 부르지 않게
@@ -92,7 +93,7 @@ export function inputChip(
       field.querySelector<HTMLElement>("select, input")?.focus();
     },
   });
-  chip.title = tl("Formula_Var");
+  chip.title = `${tl("Var_Tone")} · ${tl("Formula_Var")}`;
   wrap.append(chip);
   return wrap;
 }

M01_MasterData/M01_MasterData_UI_LogicLab_Pill.ts

@@ -7,6 +7,7 @@
 
 import { el } from "@ui/ui_template_elements";
 import { createButton } from "@ui/ui_template_button";
+import { tl } from "./M01_MasterData_UI_LogicLab_Text";
 
 export interface Pill {
   /** 알약 글 — 보기 「표 QF000421」 */
@@ -17,8 +18,9 @@ export interface Pill {
 
 /** 알약 하나 — 글자 조각 사이에 끼워 쓰는 단추 */
 export function pillButton(p: Pill): HTMLButtonElement {
-  // 알약 = 단추 부품(보조 · 24) — data-pill 은 시험 · 촬영이 잡음
-  const b = createButton({ label: p.label, variant: "ghost", size: 24 });
+  // 알약 = 요소 연결 단추(보조 · 낮은 20 · 정보색 갈래) — data-pill 은 시험 · 촬영이 잡음
+  const b = createButton({ label: p.label, variant: "ghost", size: 20, tone: "link" });
+  b.title = tl("Pill_Tone");
   b.classList.add("m01lab__pill");
   b.dataset.pill = p.label;
   b.addEventListener("click", (ev) => {

M01_MasterData/M01_MasterData_UI_LogicLab_Text.ts

@@ -61,6 +61,8 @@ const TEXT = {
     "누르면 시험 계산 입력을 고침 · 다시 셈(정본 안 바뀜)",
     "Click to change the trial input and recalculate (source unchanged)",
   ],
+  Pill_Tone: ["요소 연결", "Linked element"],
+  Var_Tone: ["옵션", "Option"],
   Modal_Sum: ["한 줄 풀이", "In one line"],
   Pill_Hint: ["쓰인 자료 — 누르면 펼침", "Data used — tap to open"],
   Modal_UnitPrice: ["단가", "Unit price"],

resources/tester/test_734_calc_buttons.py

@@ -0,0 +1,33 @@
+"""734-1 계산식 열 단추 지킴 시험 — 낮은 단(20) · 갈래 색(옵션값 · 요소 연결) · 풍선 글(화면 · 서버 없음)."""
+
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[2]
+M01 = ROOT / "M01_MasterData"
+
+
+def _t(p: Path) -> str:
+    return p.read_text(encoding="utf-8")
+
+
+def test_알약은_낮은_단과_요소연결_갈래():
+    s = _t(M01 / "M01_MasterData_UI_LogicLab_Pill.ts")
+    assert 'size: 20, tone: "link"' in s and 'tl("Pill_Tone")' in s
+
+
+def test_입력칩은_낮은_단과_옵션_갈래():
+    s = _t(M01 / "M01_MasterData_UI_LogicLab_Formula.ts")
+    assert "size: 20," in s and 'tone: "option"' in s and 'tl("Var_Tone")' in s
+
+
+def test_갈래_색은_공통_값만():
+    css = _t(ROOT / "ui_template" / "ui_template_button.css")
+    head = css[css.index("갈래 색(tone)") :]
+    assert '[data-tone="option"]' in head and "var(--color-warning)" in head
+    assert '[data-tone="link"]' in head and "var(--color-info)" in head
+    assert "#" not in head.split("*/", 1)[1]  # 날 색 값 없음
+
+
+def test_풍선_글_두_갈래():
+    s = _t(M01 / "M01_MasterData_UI_LogicLab_Text.ts")
+    assert '"요소 연결"' in s and '["옵션"' in s

ui_template/ui_template_button.css

@@ -175,3 +175,21 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* 갈래 색(tone) — 보조(ghost) 단추에 갈래를 입힘 · 옵션값 = 경고색 계열 · 요소 연결 = 정보색 계열(밝음 · 어두움 모두 글 대비 4.5 : 1 안팎)
+   쓰기 = `createButton({ variant: "ghost", size: 20, tone: "option" | "link" })` · data-tone */
+.ui-btn--ghost[data-tone] {
+  --ui-tone: var(--color-primary);
+  border-color: color-mix(in srgb, var(--ui-tone) 60%, var(--color-surface-raised));
+  background-color: color-mix(in srgb, var(--ui-tone) 10%, var(--color-surface-raised));
+  color: color-mix(in srgb, var(--ui-tone) 85%, var(--color-ink));
+}
+.ui-btn--ghost[data-tone="option"] {
+  --ui-tone: var(--color-warning);
+}
+.ui-btn--ghost[data-tone="link"] {
+  --ui-tone: var(--color-info);
+}
+.ui-btn--ghost[data-tone]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-color: color-mix(in srgb, var(--ui-tone) 22%, var(--color-surface-raised));
+}

ui_template/ui_template_button.ts

@@ -50,6 +50,8 @@ export interface ButtonOptions {
   label: string;
   variant?: ButtonVariant;
   size?: ButtonSize;
+  /** 갈래 색(보조 꼴에만) — "option" 옵션값 · "link" 요소 연결 · `data-tone` */
+  tone?: "option" | "link";
   /** 이벤트 핸들러 (frontend.md §4: on[페이지]_[기능]_[액션] 명명) */
   onClick?: (ev: MouseEvent) => void;
   disabled?: boolean;
@@ -67,6 +69,7 @@ export function createButton(opts: ButtonOptions): HTMLButtonElement {
     attrs: { type: opts.type ?? "button" },
   });
   if (size) setUiSize(btn, size);
+  if (opts.tone) btn.dataset.tone = opts.tone;
   if (opts.iconStart) {
     const mark =
       typeof opts.iconStart === "string"