/* * ============================================================ * tokens.css — デザイントークン（色・サイズ・タイポグラフィ） * ============================================================ * * このファイルに UI の見た目を決める値をすべて集約しています。 * デザインを変更するときはここだけ編集してください。 * style.css 内の具体的なセレクタは触らなくて OK です。 * * app.js の FEED_TYPE / SPEECH_ROLE 色も下記の変数と対応しています。 * JSの定数を変更する場合は app.js の同名オブジェクトも更新してください。 * * ※ サーバー側テーマ上書き (/api/theme) はこのファイルの * 変数を動的に書き換えます。初期値（デフォルト）はここが基準。 * ============================================================ */ :root { /* ---------------------------------------------------------- * 背景・サーフェス * ---------------------------------------------------------- */ --bg: #faf8f5; /* ページ背景（ウォームホワイト） */ --cream: #f3efe8; /* カード内背景・セカンダリ面 */ --white: #fff; /* 白（カード・ヘッダー等） */ --code-bg: #f7fafc; /* コード・rawテキスト背景（sp-raw等） */ /* ---------------------------------------------------------- * テキスト * ---------------------------------------------------------- */ --txt: #1a202c; /* 本文テキスト（ほぼ黒） */ --mid: #4a5568; /* 中間グレー（補足テキスト等） */ --mute: #718096; /* ミュートテキスト（日付・ラベル等） */ --dim: #a0aec0; /* 薄いテキスト（区切り・プレースホルダ等） */ /* ---------------------------------------------------------- * ボーダー * ---------------------------------------------------------- */ --bdr: #ddd6cc; /* 標準ボーダー */ --bdr-l: #e8e2d8; /* 軽いボーダー（仕切り線など） */ /* ---------------------------------------------------------- * ブランドカラー — 立憲（CDP） * ---------------------------------------------------------- */ --cdp: #1a5fa8; /* 立憲ブルー（アクセント・リンク等） */ --cdp-l: #e8f1fb; /* 立憲ブルー 薄め（アクティブ背景等） */ --cdp-t: #2b79d4; /* 立憲ブルー 明るめ（ボーダー・ホバー等） */ /* ---------------------------------------------------------- * ブランドカラー — 公明（KOMEITO） * ---------------------------------------------------------- */ --kom: #b01c2e; /* 公明レッド */ --kom-l: #fdecea; /* 公明レッド 薄め */ --kom-t: #d43a4f; /* 公明レッド 明るめ */ /* ---------------------------------------------------------- * ブランドカラー — パープル（独立・旧政党等） * ---------------------------------------------------------- */ --purp: #6b46c1; /* パープル */ --purp-l: #f3f0ff; /* パープル 薄め */ --purp-t: #9f7aea; /* パープル 明るめ */ /* ---------------------------------------------------------- * ブランドカラー — ゴールド（特別表示等） * ---------------------------------------------------------- */ --gold: #b87c00; /* ゴールド */ --gold-l: #fef9e7; /* ゴールド 薄め */ --gold-b: #f0c040; /* ゴールド ボーダー */ /* ---------------------------------------------------------- * ステータス・通知カラー * ---------------------------------------------------------- */ --status-ok: #68d391; /* 収集OK（ステータスドット） */ --status-ng: #fc8181; /* 収集NG（ステータスドット） */ --badge-danger-bg: #e53e3e; /* 新着バッジ背景 */ --badge-danger-txt: #fff; /* 新着バッジ文字 */ --notif-on-bg: #f0fff4; /* 通知ON 背景 */ --notif-on-bdr: #9ae6b4; /* 通知ON ボーダー */ --notif-on-txt: #276749; /* 通知ON テキスト */ --notif-on-hover: #c6f6d5; /* 通知ON ホバー背景 */ --danger-hover-bg: #fff5f5; /* 危険アクション ホバー背景 */ --danger-hover-bdr: #fc8181; /* 危険アクション ホバーボーダー */ --danger-hover-txt: #c53030; /* 危険アクション ホバーテキスト */ /* ---------------------------------------------------------- * トースト通知 * ---------------------------------------------------------- */ --toast-bg: #2d3748; /* トースト背景 */ --toast-txt: #fff; /* トースト文字 */ /* ---------------------------------------------------------- * 外部サービス — YouTube * ---------------------------------------------------------- */ --yt-bg: #111; /* プレイヤー背景 */ /* ---------------------------------------------------------- * 外部サービス — Instagram * ---------------------------------------------------------- */ --ig-gradient: linear-gradient(135deg, #fce4ec 0%, #e8eaf6 100%); --ig-bdr: #e1e8f0; /* リンクカード ボーダー */ --ig-handle-txt: #c4316e; /* ハンドル名テキスト */ /* ---------------------------------------------------------- * プレースホルダー（写真なし議員・報道カード） * ---------------------------------------------------------- */ --ph-gradient-default: linear-gradient(135deg, #7a8a9e, #a0aec0); --ph-gradient-alliance: linear-gradient(135deg, #1a5fa8, #b01c2e); --ph-gradient-press: linear-gradient(135deg, #2b6cb0 0%, #2c5282 100%); /* ---------------------------------------------------------- * シャドウ * ---------------------------------------------------------- */ --sh-s: 0 1px 4px rgba(0,0,0,.08); /* 小（カード浮き上がり等） */ --sh-m: 0 4px 16px rgba(0,0,0,.10); /* 中（ホバー等） */ --sh-l: 0 8px 32px rgba(0,0,0,.14); /* 大（パネル・モーダル等） */ /* ---------------------------------------------------------- * ボーダー半径 * ---------------------------------------------------------- */ --r: 12px; /* 標準カード角丸 */ /* ---------------------------------------------------------- * レイアウト・サイズ * ---------------------------------------------------------- */ --hdr-h: 58px; /* ヘッダー高さ */ /* ---------------------------------------------------------- * タイポグラフィ * ---------------------------------------------------------- */ --font-sans: 'Noto Sans JP'; /* 本文・UI フォント */ --font-serif: 'Noto Serif JP'; /* 見出し・名前フォント */ --fs-base: 14px; /* 基準フォントサイズ */ --lh-base: 1.6; /* 基準行間 */ --ls-base: normal; /* 基準文字間隔 */ /* ---------------------------------------------------------- * 背景パターン（テーマ上書き用） * ---------------------------------------------------------- */ --pattern: none; /* SVG パターン等を指定可 */ --pattern-size: auto; /* パターンサイズ（複数レイヤーはカンマ区切り） */ --pattern-pos: 0 0; /* パターン位置（複数レイヤーはカンマ区切り） */ /* ---------------------------------------------------------- * コンテンツ種別バッジ（app.js: FEED_TYPE と対応） * * JS 側の FEED_TYPE オブジェクト（app.js ~L268）と値を合わせています。 * ここを変更したら app.js の FEED_TYPE も同様に更新してください。 * ---------------------------------------------------------- */ --feed-yt-color: #e53e3e; --feed-yt-bg: #fff5f5; --feed-yt-bdr: #fed7d7; --feed-speech-color: #2b6cb0; --feed-speech-bg: #ebf8ff; --feed-speech-bdr: #bee3f8; --feed-podcast-color: #6b46c1; --feed-podcast-bg: #faf5ff; --feed-podcast-bdr: #e9d8fd; --feed-blog-color: #276749; --feed-blog-bg: #f0fff4; --feed-blog-bdr: #c6f6d5; --feed-press-color: #b7791f; --feed-press-bg: #fffbeb; --feed-press-bdr: #f6e05e; /* ---------------------------------------------------------- * 発言役割バッジ（app.js: SPEECH_ROLE と対応） * * JS 側の SPEECH_ROLE オブジェクト（app.js ~L289）と値を合わせています。 * ここを変更したら app.js の SPEECH_ROLE も同様に更新してください。 * ---------------------------------------------------------- */ --role-chair-color: #744210; --role-chair-bg: #fefcbf; --role-chair-bdr: #f6e05e; --role-questioner-color: #2b6cb0; --role-questioner-bg: #ebf8ff; --role-questioner-bdr: #bee3f8; --role-respondent-color: #276749; --role-respondent-bg: #f0fff4; --role-respondent-bdr: #c6f6d5; --role-speaker-color: #553c9a; --role-speaker-bg: #faf5ff; --role-speaker-bdr: #e9d8fd; --role-other-color: #4a5568; --role-other-bg: #f7fafc; --role-other-bdr: #cbd5e0; --role-debate-color: #9b2c2c; --role-debate-bg: #fff5f5; --role-debate-bdr: #fc8181; /* ---------------------------------------------------------- * 外部リンクバッジ（app.js ~L578, L1112 と対応） * * wiki / HP / X / YouTube / Instagram / blog / note の * ボタン色セットです。JS 側の linkMap 配列と値を合わせています。 * ---------------------------------------------------------- */ --link-wiki-bg: #ebf8ff; --link-wiki-txt: #2b6cb0; --link-wiki-bdr: #bee3f8; --link-hp-bg: #fef9e7; --link-hp-txt: #b87c00; --link-hp-bdr: #f0c040; --link-x-bg: #f7fafc; --link-x-txt: #1a202c; --link-x-bdr: #e2e8f0; --link-yt-bg: #fff5f5; --link-yt-txt: #e53e3e; --link-yt-bdr: #fed7d7; --link-ig-bg: #fff0f6; --link-ig-txt: #c4316e; --link-ig-bdr: #fce8f0; --link-blog-bg: #f0fff4; --link-blog-txt: #276749; --link-blog-bdr: #c6f6d5; /* ---------------------------------------------------------- * 報道カード メディア種別 プレースホルダー（app.js ~L1891 と対応） * * JS 側の pressPlaceholderStyle 関数と値を合わせています。 * ---------------------------------------------------------- */ --press-ph-international: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); --press-ph-hodo: linear-gradient(135deg, #c05621 0%, #dd6b20 100%); --press-ph-gyokai: #f7fafc; /* 業界紙のみフラット */ --press-ph-tsushin: linear-gradient(135deg, #2b6cb0 0%, #2c5282 100%); --press-ph-chiho: linear-gradient(135deg, #276749 0%, #2f855a 100%); --press-ph-default: linear-gradient(135deg, #2b6cb0 0%, #2c5282 100%); /* ---------------------------------------------------------- * 議会配置パネル バッジ（app.js ~L1471 と対応） * * 委員会メンバー役職（委員長・理事・委員）ごとの色です。 * ---------------------------------------------------------- */ --diet-chair-bg: #ebf8ff; --diet-chair-txt: #2b6cb0; --diet-chair-bdr: #bee3f8; --diet-officer-bg: #f7fafc; --diet-officer-txt: #4a5568; --diet-officer-bdr: #cbd5e0; --diet-member-bg: #fafafa; --diet-member-txt: #999; --diet-member-bdr: #eee; /* ---------------------------------------------------------- * 議会配置パネル UI（app.js ~L1400 と対応） * * 国会発言ページの衆参タブパネル自体の色（ボーダー・タブ背景等）。 * クールグレー系のため --bdr-l（ウォームベージュ）とは別トークン。 * ---------------------------------------------------------- */ --diet-panel-bdr: #e2e8f0; /* パネルボーダー・タブ区切り */ --diet-tab-bg: #f8f9fa; /* 非アクティブタブ背景 */ --diet-empty-txt: #aaa; /* データなし文字色 */ /* ---------------------------------------------------------- * 議長・副議長チップ（app.js ~L1435 と対応） * * 委員会パネル内の議長・副議長名に使うパープル系チップ。 * --role-speaker-* とは微妙に異なる（より薄いパープル）。 * ---------------------------------------------------------- */ --speaker-chip-bg: #faf5ff; --speaker-chip-txt: #553c9a; --speaker-chip-bdr: #d6bcfa; /* ---------------------------------------------------------- * 旧党出身バッジ（app.js ~L1282 と対応） * ---------------------------------------------------------- */ --origin-bg: #f0f0f0; /* 旧党出身バッジ背景（ニュートラルグレー） */ --origin-txt: #555; /* 旧党出身バッジテキスト */ /* ---------------------------------------------------------- * トピックタグチップ（app.js ~L1996 発言トピック・国会委員会） * ---------------------------------------------------------- */ --topic-chip-bg: #ebf8ff; /* 国会発言トピック背景 */ --topic-chip-txt: #2c5282; /* 国会発言トピックテキスト（深いネイビー） */ --press-chip-bg: #e3f2fd; /* 報道関連チップ背景 */ --press-chip-txt: #1565c0; /* 報道関連チップテキスト */ /* ---------------------------------------------------------- * 旧コードとの互換エイリアス * style.css / app.js の一部で参照されている変数名。 * 元々 :root に定義されておらず未定義だったもので、 * 今回適切な既存トークンへ紐付けます。 * ---------------------------------------------------------- */ --dark: var(--txt); /* 旧: 本文色（--txt と同等） */ --muted: var(--mute); /* 旧: ミュートテキスト（--mute と同等） */ --bg2: var(--cream); /* 旧: セカンダリ背景（--cream と同等） */ --card: var(--white); /* 旧: カード背景（--white と同等） */ --border: var(--bdr); /* 旧: ボーダー（--bdr と同等） */ --accent: var(--cdp); /* 旧: アクセント色（--cdp と同等） */ --txt2: var(--mid); /* 旧: セカンダリテキスト（--mid と同等） */ --neg: var(--badge-danger-bg); /* フォームバリデーション エラー色 */ --pos: var(--status-ok); /* フォームバリデーション 成功色 */ --danger: var(--badge-danger-bg); /* エラー表示色 */ }