/* ============================================================================ * tokens.css — デザイントークン (docs/research/04_uiux.md §6) * 配色コンセプト=「信頼感のある業務カレンダー」: 中性スレート基調 + 落ち着いた藍アクセント。 * 状態色(緑=確定/琥珀=仮/赤=警告)だけを意味的に立たせる。 * 生hex/生font-familyの直書き禁止。全要素はここを var() で参照する。 * テーマは で切替。FOUCはbase.htmlの早期inline scriptで回避。 * ========================================================================== */ :root { /* ネイティブフォーム部品(select/number/日付/スクロールバー)をライト基調で描画 */ color-scheme: light; /* --- タイポ --- */ --font-sans: "Inter", "Noto Sans JP", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* 日時・ISO表示用 */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --lh-tight: 1.3; --lh-base: 1.55; /* --- 余白(8pxグリッド) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10); --tap-min: 44px; /* タップ最小領域 */ /* --- サーフェス / インク(中性スレート) --- */ --bg: #f7f8fa; --surface: #ffffff; --surface-2: #eef1f5; /* 空きセル・補助面 */ --border: #d9dee5; --ink: #1b2330; /* 主テキスト */ --ink-2: #5b6573; /* 副テキスト */ --muted: #98a2b3; /* 解放/取消/無効 */ /* --- アクセント(落ち着いた藍) --- */ --accent: #3b5bdb; --accent-hover: #314bbd; --accent-soft: #e7ecfb; --on-accent: #ffffff; /* --- 状態色(意味色) --- */ --state-tentative: #b7791f; --state-tentative-soft: #fdf3e2; /* 琥珀=仮 */ --state-confirmed: #2f9e6f; --state-confirmed-soft: #e6f6ee; /* 緑=確定 */ --danger: #d64545; --danger-soft: #fbeaea; /* 赤=警告/重複 */ --warning: #c4860a; /* --- 確信度バンド(設定駆動の色) --- */ --conf-high: var(--state-confirmed); --conf-mid: var(--state-tentative); --conf-low: var(--danger); /* --- フェーズ色 --- */ --phase-proposing: #3b5bdb; --phase-awaiting: #b7791f; --phase-confirmed: #2f9e6f; --phase-reschedule: #7c5cdb; /* --- カレンダー(C) --- */ --cal-busy: #3a4252; /* 既存予定(濃) */ --cal-tentative: #b7791f; /* 仮(斜線パターン色) */ --cal-candidate: #3b5bdb; /* 抽出候補(点線枠) */ --cal-grid: var(--border); } [data-theme="dark"] { /* ネイティブフォーム部品(select のオプション/数値スピナー/日付ピッカー/スクロールバー)を ダーク基調で描画。これが無いと OS が黒文字を白地で描き、暗背景上で見えなくなる。 */ color-scheme: dark; --bg: #0e1116; --surface: #161b22; --surface-2: #1d242e; --border: #2b333f; --ink: #e6edf3; --ink-2: #9aa6b2; --muted: #6b7685; --accent: #6b88f2; /* ダークでは明度↑ */ --accent-hover: #8197f5; --accent-soft: #1b2540; --on-accent: #0e1116; --state-tentative: #e3a857; --state-tentative-soft: #2a2113; --state-confirmed: #4fc18a; --state-confirmed-soft: #122a1f; --danger: #f06565; --danger-soft: #2c1414; --warning: #e3a857; --cal-busy: #c2cad6; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); } /* ============================================================================ * 最小スタイル土台(トークン参照のみ・Tailwindは別途CDNで補完) * ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink); background-color: var(--bg); -webkit-font-smoothing: antialiased; } /* --- フォーム部品の可読性(ダーク/ライト両対応・黒文字埋没の防止) --- フォーム入力は .btn を流用している箇所があるが、ネイティブ select の option や 数値入力のテキストがテーマ非対応で黒くなるのを防ぐため、トークン参照で明示する。 */ input, select, textarea { color: var(--ink); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; } /* ネイティブ select のドロップダウン一覧(option)。dark でも白地黒文字にならないように。 */ select option { color: var(--ink); background-color: var(--surface); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } a { color: var(--accent); } /* フォーカスリングは消さず、アクセント色で視認可能に(a11y §9) */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- トップバー --- */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--sp-4); height: 48px; padding: 0 var(--sp-4); background-color: var(--surface); border-bottom: 1px solid var(--border); } .topbar__brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--ink); text-decoration: none; } .topbar__nav { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); } .topbar__spacer { flex: 1 1 auto; } .topbar__action { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-min); min-height: var(--tap-min); padding: 0 var(--sp-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink-2); cursor: pointer; } .topbar__action:hover { background-color: var(--surface-2); color: var(--ink); } /* 通知バッジ */ .badge-count { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); font-size: var(--fs-xs); color: var(--on-accent); background-color: var(--accent); border-radius: 999px; } /* --- 汎用面 --- */ .surface-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); } .content { max-width: 1200px; margin: 0 auto; padding: var(--sp-6) var(--sp-4); } /* --- ボタン(主/副) --- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: 0 var(--sp-4); font-size: var(--fs-sm); border-radius: var(--radius-sm); border: 1px solid var(--border); background-color: var(--surface); color: var(--ink); cursor: pointer; } .btn--primary { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn--primary:hover { background-color: var(--accent-hover); } .btn--confirm { background-color: var(--state-confirmed); border-color: var(--state-confirmed); color: var(--on-accent); } /* --- トースト/モーダル outlet --- */ #toast-outlet { position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; } #toast-outlet > * { pointer-events: auto; } #modal-outlet:empty { display: none; } /* スクリーンリーダ専用 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* HTMX indicator(処理中スピナー) */ .htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }