/* =========================================================== 見た目の大もと ― このファイルだけが色と形の実体を持つ =========================================================== ■ ここを直せば全画面が変わります ほかの CSS（tool-common / ledger / 各ツールの app.css）は、 ここで決めた名前を var() で参照するだけです。実体の色は書きません。 ■ なぜ :root なのか 以前はツールごとに #mkt, #pcr, … と id を並べて色を配っていました。 その書き方だと、ツールを1つ足すたびに5箇所へ id を追記する必要があり、 追記もれがそのまま「この画面だけ色が違う」になっていました。 :root に置けば、新しいツールは何も書かなくても同じ見た目になります。 ■ 二階建て 1段目（中核）… 実体の色を持つ。数は少なく保つ。 2段目（別名）… 1段目を指すだけ。古い名前との互換もここで吸収する。 色を変えたいときは 1段目だけ触ってください。 ■ 明るさ 切り替えは （assets/js/theme.js）。 Velzon 側は data-bs-theme を見ますが、theme.js が両方セットします。 =========================================================== */ /* ============ 1段目：中核。実体の色はここだけ ============ */ :root{ /* --- 面（奥から手前へ）--- */ --bg: var(--vz-body-bg); /* 画面の地 */ --surface: var(--vz-secondary-bg); /* カードの地 */ --surface-2: var(--vz-tertiary-bg); /* 一段沈んだ帯・表の縞 */ --surface-3: #eef1f5; /* さらに沈んだ所 */ /* --- 文字（濃いほうから）--- Velzon の --vz-gray-600(#878a99) は白地だと 3.1:1 しかなく、 小さい字に使うと読めません。補助文字はここで決め直します。 */ --ink: var(--vz-body-color); /* 本文 */ --ink-2: #454c58; /* 少し弱い本文 */ --muted: #5a6170; /* 補助。白地で 5.6:1 */ --ink-faint: #656c7c; /* いちばん弱い。ここが下限 */ /* --- 罫線 --- */ --line: var(--vz-border-color); --line-strong: var(--vz-gray-400); /* --- 役割の色。白地の小さい字でも読める濃さにしてある --- */ --accent: var(--vz-primary); /* 塗り。白文字が乗る */ --accent-text: var(--vz-primary); /* 文字。白地で 7.2:1 */ /* --cool を文字に使うと、うすい青地（--cool-soft）で 4.24:1 しかなく読めない。 --accent / --accent-text と同じ考え方で、文字用に一段濃いほうを持つ。 */ --cool-text: #1a5fb4; /* --cool-soft の上で 5.4:1 */ --ok: #0b7a43; --warn: #8a5e00; --bad: #c0392b; --cool: #1f6fd0; /* ボタンの塗り（承認＝緑・差し戻し/削除＝赤）。白い字が乗る濃さで、白・黒どちらのテーマでも同じ。 --ok / --bad は字と札の色なので、黒テーマでは明るくなり塗りに使えない（白い字が 2:1） */ --go-fill: #0b7a43; --go-fill-h: #09663a; /* 白い字で 5.6:1 */ --ng-fill: #c0392b; --ng-fill-h: #a93226; /* 白い字で 5.4:1 */ /* --- 形 --- */ --r-sm: 4px; --r: 6px; --r-lg: 10px; /* 情報の箱（パネル）の角丸。 以前は 3/4/5/6/8/9/10/12px が混ざっていて、1画面の中に3種類以上あるものが22画面あった。 Bootstrap の .card（4px）に合わせる。箱の形は画面を移っても変わらないこと。 */ --panel-r: var(--r-sm); /* --- 字 --- */ --f: var(--vz-font-sans-serif); --f-num: var(--vz-font-sans-serif); } html[data-theme="dark"]{ --surface-3: #31363c; --ink-2: #aab4bd; --muted: #aab4bd; --ink-faint: #8d98a2; --line: #32383e; --line-strong: #454d55; /* 黒地では鮮やかなほうが読めるので、濃くせず明るい側に振る */ --ok: #45cb85; --warn: #ffbe5c; --bad: #ff8a73; --cool: #6cb2ff; /* 文字として置くときの accent。 塗りの --accent（#4b38b3）は白文字が乗るので暗いままにし、 文字に使うぶんだけ明るい側を用意する。 1色で両方は無理：白と4.5:1 を満たすには暗く、黒地と4.5:1 を満たすには明るくなる。 */ --accent-text: #9a8cfc; /* カード地(#2a2d31)の上で 5.0:1 */ --cool-text: var(--cool); /* 黒地では --cool（#6cb2ff）のままで読める */ } html[data-theme="dark"]{ --teal-l: #45cb85; --mgr: #ff8a73; --mgr-line: #ff8a73; } /* ============ 2段目：別名。1段目を指すだけ ============ 同じ意味に複数の名前が付いてしまっているぶんを、ここで1つに束ねます。 新しく書くときは 1段目の名前を使ってください。 */ :root{ /* 面 */ --panel: var(--surface); --panel2: var(--surface-2); --sunk: var(--surface-2); --rail: var(--surface-2); --hdr: var(--surface); /* 文字 */ --body: var(--ink); --fg: var(--ink); --ink-3: var(--muted); --ink-muted: var(--muted); --ink-strong: var(--vz-heading-color); --biz-sub: var(--muted); --biz-muted: var(--muted); --biz-dim: var(--ink-faint); --mono: var(--muted); --slate: var(--muted); --slate-d: var(--muted); --plan: var(--muted); /* 罫線 */ --line2: var(--surface-2); --line-2: var(--surface-2); --hl-line: var(--line-strong); /* 役割 */ --good: var(--ok); --fact: var(--ok); --amber: var(--warn); --guess: var(--warn); --need: var(--bad); --check: var(--bad); --hot: var(--bad); --focus: var(--accent); --brand: var(--accent); --accent-2: var(--cool); --accent-ink: var(--on-accent); --on-accent: #fff; /* うすい下地 */ --accent-soft: var(--vz-primary-bg-subtle); --ok-soft: var(--vz-success-bg-subtle); --ok-bg: var(--vz-success-bg-subtle); --okbg: var(--vz-success-bg-subtle); --good-soft: var(--vz-success-bg-subtle); --warn-soft: var(--vz-warning-bg-subtle); --warn-bg: var(--vz-warning-bg-subtle); --warnbg: var(--vz-warning-bg-subtle); --amber-soft: var(--vz-warning-bg-subtle); --bad-soft: var(--vz-danger-bg-subtle); --badbg: var(--vz-danger-bg-subtle); --need-bg: var(--vz-danger-bg-subtle); --hot-soft: var(--vz-danger-bg-subtle); --cool-soft: var(--vz-info-bg-subtle); --hl-bg: var(--vz-warning-bg-subtle); --plan-soft: var(--vz-primary-bg-subtle); /* 差し色。コスト試算系（teal）と仮想ヒアリング（mgr）で使う */ --teal: var(--accent); --teal-d: var(--accent); --teal-l: #0ab39c; --teal-p: var(--vz-primary-bg-subtle); --amber-p: var(--vz-warning-bg-subtle); --mgr: #c0392b; --mgr-bg: var(--vz-danger-bg-subtle); --mgr-line: #c0392b; --bad-bg: var(--vz-danger-bg-subtle); /* --- グラフの系統色 --- 図の中で系列を塗り分けるための8色。順番に使えば隣り合う色がぶつかりません。 役割の色（--ok / --bad など）とは別物です。あちらは「良い・悪い」を表し、 こちらは「1本目・2本目」を表します。 */ --s1:#4b38b3; --s2:#3577f1; --s3:#0ab39c; --s4:#299cdb; --s5:#f06548; --s6:#f7b84b; --s7:#6559cc; --s8:#45cb85; /* 系統色の別名（各ツールが使っていた名前） */ --c1:var(--s1); --c2:var(--s2); --c3:var(--s8); --c4:var(--s4); --c5:var(--s5); --c6:#ffbe0b; --c7:var(--s7); --c8:var(--s3); --p1:var(--s1); --p2:var(--s2); --p3:var(--s3); --p4:var(--s6); --tA:var(--accent); --tB:var(--s3); --tC:var(--s4); --tD:var(--vz-warning); /* 決算書分析：資産＝寒色、負債＝暖色、純資産＝緑 */ --cA1:var(--s2); --cA2:var(--s4); --cA3:var(--s1); --cA4:var(--s7); --cL1:var(--s5); --cL2:#f7917a; --cL3:#ffbe0b; --cE1:var(--s3); --cE2:var(--s8); /* 製品比較の3系統（自社・競合・代替） */ --pA:var(--accent); --pB:var(--bad); --pC:var(--ok); /* 形・字の別名 */ --r-md: var(--r); --fs: 13px; --shadow: var(--vz-box-shadow, 0 1px 2px rgba(18,25,29,.07)); --sans: var(--f); --f-body: var(--f); --f-text: var(--f); --f-head: var(--f); --f-mono: var(--f-num); --font-b: var(--f); --font-d: var(--f); --font-m: var(--f-num); --font-ui: var(--f); --font-body: var(--f); --font-data: var(--f-num); --font-num: var(--f-num); --font-util: var(--f); } /* 反転パネル（濃い下地に白文字）。黒のときも濃いままにしないと --ink が明るくなって白文字が読めなくなる */ .biz-invert, .biz-invert .k, .biz-invert .m, .biz-invert .s{ color:#f2f5f7; } .biz-invert{ background:#1f2429; }