/* ============================================================ dssp-app design tokens デジタル庁デザインシステム / ダッシュボードデザインガイドブック準拠 - https://www.digital.go.jp/resources/dashboard-guidebook - https://design.digital.go.jp/dads/foundations/color/color-palette/ 注意: 厳密な HEX は DS の Figma / Power BI テンプレートが SoT。 ここでは公開資料で確認できた中核 HEX を採用し、DS のカテゴリ構造 （Text / Background / Charts / Semantic）に従ってトークン化する。 確認済みアンカー: Blue-500 #4979F5 / Blue-50 #E8F1FE ダッシュボード系列色 #5FC9C9 #5CBF89 #FFA14A #FF7793 #9C7BFF #FFBE5E このファイルが配色の単一 SoT。色を変えるときはここだけ触る。 ============================================================ */ :root { /* --- Brand / Primary (DS Blue) --- */ --color-primary: #4979F5; /* Blue-500: ヘッダー/主要アクセント */ --color-primary-dark: #2D5BD8; /* hover/active, リンク濃色 */ --color-primary-tint: #E8F1FE; /* Blue-50: 強調背景・選択状態 */ /* --- Text --- */ --color-text: #1F1F1F; /* 本文 (on light) */ --color-text-label: #595959; /* 補助テキスト (>=4.5:1 on white) */ --color-text-link: #2D5BD8; --color-text-on-dark: #FFFFFF; /* --- Background --- */ --color-bg: #FFFFFF; /* standard */ --color-bg-highlight: #F0F4F8; /* 強調コンテンツ */ --color-bg-control: #F5F5F5; /* UI コントロール面 */ /* --- Lines --- */ --color-grid: #E0E0E0; /* グラフのグリッド線 */ --color-border: #D0D5DD; /* 枠線 */ /* --- Semantic --- */ --color-positive: #2E9E6B; /* 増加/上昇 */ --color-negative: #D64550; /* 減少/下降 */ --color-success: #2E7D32; /* 目標達成 */ --color-error: #D32F2F; /* 警告/失敗 */ /* --- Chart series (レーダー/棒/折れ線の系列順) --- DS ダッシュボードテンプレート準拠。色覚多様性に配慮した順序。 DSS v2.0 は 6 類型 → レーダーは 6 軸、系列は重ね合わせる プロファイル（例: 現在 / 目標 / ロールモデル）に割り当てる。 */ --series-1: #4979F5; /* Blue */ --series-2: #5FC9C9; /* Aqua */ --series-3: #5CBF89; /* Mint */ --series-4: #FFA14A; /* Apricot */ --series-5: #FF7793; /* Pink */ --series-6: #9C7BFF; /* Lavender*/ --series-7: #FFBE5E; /* Cream */ --series-neutral: #9AA0A6; /* de-emphasized */ /* レーダーの塗りに系列色を薄く敷くときの透過率 */ --radar-fill-alpha: 0.18; /* 歯車設定で選択中のチャート色（app.js が選択値に同期）。 充足率バー・アドバイス内の科目名強調など、UI全体の統一に使う。既定は系列1。 */ --dssp-accent: var(--series-1); } /* ============================================================ テーマ切替（ライト / ダーク） - 既定: OS 設定に追従（prefers-color-scheme） - 明示指定: で固定（歯車メニューから） 論文スクショ等で「常にライト」「常にダーク」を選べる。 ダークのトークン値は1か所で管理したいが CSS にミックスインが無いため、 「OS自動（明示指定なし）」と「明示ダーク」の2セレクタで同値を宣言する。 ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-text: #E6E6E6; --color-text-label: #A6A6A6; --color-text-link: #8FB4FF; --color-bg: #0F1720; --color-bg-highlight: #15212E; --color-bg-control: #1B2733; --color-grid: #2B3A4A; --color-border: #334155; --color-primary-tint: #14263F; color-scheme: dark; } } :root[data-theme="dark"] { --color-text: #E6E6E6; --color-text-label: #A6A6A6; --color-text-link: #8FB4FF; --color-bg: #0F1720; --color-bg-highlight: #15212E; --color-bg-control: #1B2733; --color-grid: #2B3A4A; --color-border: #334155; --color-primary-tint: #14263F; color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; }