From dcf5da8ba7bdb0d82315caf284dc8ce43ad6e663 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sun, 2 Aug 2026 15:31:21 +0900 Subject: [PATCH] =?UTF-8?q?fix(B06):=20=EB=9D=BC=EC=9D=B4=ED=8A=B8=20?= =?UTF-8?q?=ED=85=8C=EB=A7=88=EC=97=90=EC=84=9C=20RR=20=EB=A9=B4=EC=A0=81?= =?UTF-8?q?=EC=9D=B4=20=EC=95=88=20=EB=B3=B4=EC=9D=B4=EB=8D=98=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EB=AC=B8=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit RR이 --color-slate를 쓰고 있었는데, 이 토큰은 --color-text-secondary의 실체라 라이트 테마에서 표 글자가 비활성처럼 읽히고 28% 밴드가 흰 배경에 묻혔다. RR을 --color-success로 옮긴다(--color-warning은 암 경계선 점선이 선점). 암반 밴드는 하나인데 표는 RR/BR로 갈려 있어 색이 어긋났다. 밴드 그룹에 암종 변형 클래스(--cut_rr / --cut_br)를 실어 표 글자색과 짝을 맞춘다. Co-Authored-By: Claude Opus 5 --- .../B06_wf3_ProfileCross_UI_Cross_Areas.ts | 7 ++++++- .../B06_wf3_ProfileCross_UI_Style_Cross.css | 18 ++++++++++++++---- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Cross_Areas.ts b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Cross_Areas.ts index 3b947449..f43e3ad8 100644 --- a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Cross_Areas.ts +++ b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Cross_Areas.ts @@ -218,7 +218,12 @@ export function appendCrossAreaBands( let pieces = bandPolygons(xs, band.top, band.bottom, x, toDisplayY); if (band.key === "fill") pieces = keepInnermost(pieces); if (!pieces.length) continue; - const group = svgElement("g", { class: `b06-chart__area b06-chart__area--${band.key}` }); + // 암반 밴드는 암종까지 클래스에 실어 색을 RR/BR로 갈라 준다 — 표 글자색과 짝이 맞아야 + // 어느 숫자를 켰는지 색으로 바로 읽힌다. + const variant = band.key === "cut_rock" ? ` b06-chart__area--${rockCell}` : ""; + const group = svgElement("g", { + class: `b06-chart__area b06-chart__area--${band.key}${variant}`, + }); for (const piece of pieces) group.append(svgElement("polygon", { points: piece.points })); group.addEventListener("click", (event) => { // 카드까지 올라가면 측점 선택이 다시 걸려 카드가 통째로 다시 그려진다 — 방금 켠 강조가 사라진다. diff --git a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css index d80fd473..a42cf701 100644 --- a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css +++ b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css @@ -582,8 +582,11 @@ color: var(--color-chart-2); } +/* RR은 `--color-slate`를 쓰면 안 된다 — 그 토큰이 곧 `--color-text-secondary`라 + 라이트 테마에서 회색 글자가 "비활성"으로 읽히고, 28% 밴드는 흰 배경에 묻힌다. + `--color-warning`도 못 쓴다(암 경계선 점선이 이미 그 색이라 밴드가 제 경계선과 섞인다). */ .b06-design__area--cut_rr { - color: var(--color-slate); + color: var(--color-success); } .b06-design__area--cut_br { @@ -632,9 +635,16 @@ stroke-width: 1.2; } -.b06-chart__area--cut_rock.is-active > polygon { - fill: color-mix(in srgb, var(--color-slate) 28%, transparent); - stroke: var(--color-slate); +/* 암반 밴드는 하나지만 색은 암종을 따라간다 — 표의 RR/BR 글자색과 같아야 짝이 읽힌다. */ +.b06-chart__area--cut_rr.is-active > polygon { + fill: color-mix(in srgb, var(--color-success) 28%, transparent); + stroke: var(--color-success); + stroke-width: 1.2; +} + +.b06-chart__area--cut_br.is-active > polygon { + fill: color-mix(in srgb, var(--color-chart-3) 28%, transparent); + stroke: var(--color-chart-3); stroke-width: 1.2; }