/* Task Calendar Design Tokens — 見た目の「値」の唯一の正本。 配色はオーナー支給のデザインhandoff（Turn4=ダーク / Turn5=ライト）を正とする。 NEST共通トークンから独立する判断は docs/adr/20260715-task-calendar-v2-design.md。 テーマ切替: （未指定はOS追従）。 アクセント色（--tc-accent*）は設定に応じて app.js が :root へ上書きする。 */ :root { /* ライト（Turn 5） */ --tc-bg: #edf1f5; /* 背景 */ --tc-surface: #ffffff; /* カード面 */ --tc-surface2: #dde4eb; /* セグメント地・チップ地・リング軌道 */ --tc-line: #dde4eb; /* 境界線 */ --tc-ink: #2b3440; /* テキスト主 */ --tc-ink2: #5a6b7d; /* 副 */ --tc-ink3: #7a8698; /* 弱 */ --tc-ink4: #9aa5b1; /* 最弱・プレースホルダ */ --tc-check-border: #b9c2cc; /* 未チェックの丸枠 */ --tc-shadow: 0 1px 3px rgba(40, 50, 65, .07); --tc-scrim: rgba(30, 37, 45, .45); /* シート・オーバーレイの背景 */ /* アクセント（既定=グリーン。設定で app.js が上書き） */ --tc-accent: #2f9e6e; /* プライマリ */ --tc-accent-bright: #4ed99a; /* リング進捗・強調数字 */ --tc-accent-ink: #0e2a1e; /* アクセント上のテキスト */ --tc-accent-soft: color-mix(in srgb, var(--tc-accent) 13%, transparent); --tc-accent-line: color-mix(in srgb, var(--tc-accent) 55%, transparent); /* 実行中カード / 深緑コンテナ — 両モード共通のブランド要素（handoff指定） */ --tc-deep: #123b2a; --tc-deep-track: #2a5943; /* 深緑内のリング軌道 */ --tc-deep-sub: #8fcbad; /* 深緑上のサブテキスト */ --tc-deep-ink: #eaf6f0; /* 深緑上の主テキスト */ --tc-danger: #d95b5b; /* 削除 */ --tc-sun: #e05d5d; /* 日曜・祝日（ライト/ダーク共通で読める赤） */ --tc-sat: #5b93e0; /* 土曜（同・青） */ /* 形（handoff） */ --tc-r-card: 16px; --tc-r-run: 20px; --tc-r-cell: 12px; --tc-r-sheet: 28px; --tc-r-pill: 999px; /* 書体 — Webフォントは読まない（ADR参照）。数字はモノスペース */ --tc-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Meiryo", system-ui, sans-serif; --tc-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* 文字サイズ（設定: 大=既定・中・小） */ :root[data-fontsize="medium"] body { zoom: .92; } :root[data-fontsize="small"] body { zoom: .84; } /* フォント設定（設定画面の4択。端末内蔵フォントのみ — Webフォントは読まない） */ :root[data-font="rounded"] { --tc-font: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "HGMaruGothicMPRO", "BIZ UDGothic", "Yu Gothic UI", "Meiryo", system-ui, sans-serif; } :root[data-font="mincho"] { --tc-font: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "BIZ UDMincho", "Noto Serif CJK JP", "Noto Serif JP", "MS PMincho", serif; } :root[data-font="mono"] { --tc-font: "Osaka-Mono", "Noto Sans Mono CJK JP", "MS Gothic", "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ダーク（Turn 4）— OS追従 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tc-bg: #1e252d; --tc-surface: #262e38; --tc-surface2: #313b47; --tc-line: #313b47; --tc-ink: #e8ecf1; --tc-ink2: #8b96a3; --tc-ink3: #556170; --tc-ink4: #3e4954; --tc-check-border: #3e4954; --tc-shadow: 0 1px 3px rgba(0, 0, 0, .25); --tc-scrim: rgba(8, 12, 16, .6); --tc-accent: #3fb07e; } } /* ダーク — 手動指定 */ :root[data-theme="dark"] { --tc-bg: #1e252d; --tc-surface: #262e38; --tc-surface2: #313b47; --tc-line: #313b47; --tc-ink: #e8ecf1; --tc-ink2: #8b96a3; --tc-ink3: #556170; --tc-ink4: #3e4954; --tc-check-border: #3e4954; --tc-shadow: 0 1px 3px rgba(0, 0, 0, .25); --tc-scrim: rgba(8, 12, 16, .6); --tc-accent: #3fb07e; } /* スタイル変更（設定）— 角丸・影・線だけを一括で切替。既定=まる（何もしない） */ :root[data-style="square"] { --tc-r-card: 5px; --tc-r-run: 8px; --tc-r-cell: 4px; --tc-r-sheet: 14px; --tc-r-pill: 7px; --tc-shadow: 0 1px 0 rgba(40, 50, 65, .05); } :root[data-style="crisp"] { --tc-r-card: 12px; --tc-r-run: 14px; --tc-r-cell: 8px; --tc-r-sheet: 20px; --tc-r-pill: 10px; --tc-shadow: 0 2px 6px rgba(40, 50, 65, .14); } :root[data-theme="dark"][data-style="crisp"], :root[data-style="crisp"] { } /* ======================================================================== テーマ（配色）— 設定で選べる着せ替え。data-palette 未指定＝上のデフォルト（今のデザイン）を維持。 トークンの「値だけ」を差し替える方式なので、レイアウト・機能には一切影響しない。 共通の派生トークン（surface2 / ink3.. / 実行中カード等）はアクセント・地色から自動生成する。 ======================================================================== */ /* A｜深海インク Deep Ink — ライト */ :root[data-palette="deepink"] { --tc-bg: #eef1f0; --tc-surface: #ffffff; --tc-line: #dce4e2; --tc-ink: #1c2b2a; --tc-ink2: #5e726f; --tc-accent: #0e7c6b; --tc-shadow: 0 1px 3px rgba(20, 40, 38, .08); --tc-r-card: 16px; --tc-r-run: 20px; --tc-r-cell: 12px; --tc-r-sheet: 28px; --tc-r-pill: 999px; } :root[data-palette="deepink"][data-theme="dark"] { --tc-bg: #101917; --tc-surface: #182322; --tc-line: #24312f; --tc-ink: #e6edeb; --tc-ink2: #8ca09c; --tc-accent: #2dbba3; --tc-shadow: 0 6px 20px rgba(0, 0, 0, .4); } @media (prefers-color-scheme: dark) { :root[data-palette="deepink"]:not([data-theme="light"]) { --tc-bg: #101917; --tc-surface: #182322; --tc-line: #24312f; --tc-ink: #e6edeb; --tc-ink2: #8ca09c; --tc-accent: #2dbba3; --tc-shadow: 0 6px 20px rgba(0, 0, 0, .4); } } /* B｜サンセット・アプリコット Warm Apricot — ライト */ :root[data-palette="apricot"] { --tc-bg: #fbf3ea; --tc-surface: #ffffff; --tc-line: #efe1d2; --tc-ink: #3a2a20; --tc-ink2: #8a6f5c; --tc-accent: #e4703a; --tc-shadow: 0 2px 8px rgba(120, 80, 40, .10); --tc-r-card: 20px; --tc-r-run: 24px; --tc-r-cell: 14px; --tc-r-sheet: 30px; --tc-r-pill: 999px; } :root[data-palette="apricot"][data-theme="dark"] { --tc-bg: #241812; --tc-surface: #30211a; --tc-line: #3d2c22; --tc-ink: #f4e7dc; --tc-ink2: #b79b87; --tc-accent: #ff8a55; --tc-shadow: 0 6px 22px rgba(0, 0, 0, .45); } @media (prefers-color-scheme: dark) { :root[data-palette="apricot"]:not([data-theme="light"]) { --tc-bg: #241812; --tc-surface: #30211a; --tc-line: #3d2c22; --tc-ink: #f4e7dc; --tc-ink2: #b79b87; --tc-accent: #ff8a55; --tc-shadow: 0 6px 22px rgba(0, 0, 0, .45); } } /* C｜ミッドナイト・フォーカス Neon Focus — ライト */ :root[data-palette="neon"] { --tc-bg: #f2f4f8; --tc-surface: #ffffff; --tc-line: #e2e6ef; --tc-ink: #12151c; --tc-ink2: #5a6478; --tc-accent: #5b57f0; --tc-shadow: 0 2px 10px rgba(30, 30, 60, .10); --tc-r-card: 12px; --tc-r-run: 14px; --tc-r-cell: 8px; --tc-r-sheet: 18px; --tc-r-pill: 8px; } :root[data-palette="neon"][data-theme="dark"] { --tc-bg: #0b0d14; --tc-surface: #141826; --tc-line: #1e2333; --tc-ink: #edeffa; --tc-ink2: #7c86a6; --tc-accent: #8a87ff; --tc-shadow: 0 6px 24px rgba(80, 70, 240, .28); } @media (prefers-color-scheme: dark) { :root[data-palette="neon"]:not([data-theme="light"]) { --tc-bg: #0b0d14; --tc-surface: #141826; --tc-line: #1e2333; --tc-ink: #edeffa; --tc-ink2: #7c86a6; --tc-accent: #8a87ff; --tc-shadow: 0 6px 24px rgba(80, 70, 240, .28); } } /* いずれかの配色テーマ選択時に共通で使う派生トークン（アクセント・地色から自動生成）。 デフォルト（data-palette未指定）には一切影響しない。最後に置いて確実に適用する。 */ :root[data-palette] { --tc-surface2: color-mix(in srgb, var(--tc-ink) 9%, var(--tc-surface)); --tc-ink3: color-mix(in srgb, var(--tc-ink) 55%, var(--tc-bg)); --tc-ink4: color-mix(in srgb, var(--tc-ink) 34%, var(--tc-bg)); --tc-check-border: color-mix(in srgb, var(--tc-ink) 26%, var(--tc-bg)); --tc-accent-bright: color-mix(in srgb, var(--tc-accent) 72%, white); --tc-accent-ink: #ffffff; /* 実行中カード（深緑コンテナ）をアクセント基調に着せ替え */ --tc-deep: color-mix(in srgb, var(--tc-accent) 24%, #0f1512); --tc-deep-track: color-mix(in srgb, var(--tc-accent) 46%, #0f1512); --tc-deep-sub: color-mix(in srgb, var(--tc-accent) 58%, white); --tc-deep-ink: #f4f8f6; } /* ダーク時はアクセントが明るいので、上に載る文字は濃色にして可読性を確保（既定デザインと同じ考え方） */ :root[data-palette][data-theme="dark"] { --tc-accent-ink: #10141a; } @media (prefers-color-scheme: dark) { :root[data-palette]:not([data-theme="light"]) { --tc-accent-ink: #10141a; } } /* ======================================================================== フル刷新系テーマパック（6a/6b/6c）— 世界観を固定した着せ替え。 トークンに加え、style.css 側で走査線／すりガラス／星などの装飾レイヤーを薄く重ねる。 ライト/ダーク設定に依存せず固定の見た目にする（後段に置いて確実に適用）。 ======================================================================== */ /* 6a｜Night Terminal — シアン発光1色＋極細ライン＋モノスペースのHUD路線（固定ダーク） */ :root[data-palette="night"] { --tc-bg: #0a0c10; --tc-surface: #0d1016; --tc-line: #1e2530; --tc-ink: #dceff3; --tc-ink2: #3e7783; --tc-ink3: #3e7783; --tc-ink4: #2a4a53; --tc-surface2: #10151c; --tc-check-border: #1e2530; --tc-accent: #00e5ff; --tc-accent-bright: #7df3ff; --tc-accent-ink: #04222a; --tc-deep: #071b20; --tc-deep-track: #123b44; --tc-deep-sub: #6fd8e6; --tc-deep-ink: #dbfbff; --tc-shadow: none; --tc-scrim: rgba(2, 4, 7, .72); --tc-r-card: 4px; --tc-r-run: 5px; --tc-r-cell: 3px; --tc-r-sheet: 10px; --tc-r-pill: 3px; --tc-font: "Osaka-Mono", "Noto Sans Mono CJK JP", "MS Gothic", "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* 6b｜Bounce Pop — クリーム地＋インク太線＋オフセット影のリソグラフ印刷路線（固定ライト） */ :root[data-palette="bounce"] { --tc-bg: #fff7ec; --tc-surface: #ffffff; --tc-line: #171310; --tc-ink: #171310; --tc-ink2: #6b5f52; --tc-ink3: #8a7d6d; --tc-ink4: #a89c8b; --tc-surface2: #ffe9c9; --tc-check-border: #171310; --tc-accent: #ff5c5c; --tc-accent-bright: #ff8f5c; --tc-accent-ink: #ffffff; --tc-deep: #171310; --tc-deep-track: #3a332c; --tc-deep-sub: #ffd23f; --tc-deep-ink: #fff7ec; --tc-shadow: 4px 4px 0 #171310; --tc-scrim: rgba(23, 19, 16, .45); --tc-r-card: 14px; --tc-r-run: 16px; --tc-r-cell: 10px; --tc-r-sheet: 22px; --tc-r-pill: 999px; } /* 6c｜Aurora Orbit — フロストガラス面＋控えめな星＋オーロラ・アクセントの没入路線（固定ダーク） */ :root[data-palette="aurora"] { --tc-bg: #0b0f2b; --tc-surface: rgba(38, 42, 82, .88); --tc-line: rgba(255, 255, 255, .14); --tc-ink: #e8e9f7; --tc-ink2: #8a8fc0; --tc-ink3: #6f75a8; --tc-ink4: #565c8c; --tc-surface2: rgba(255, 255, 255, .11); --tc-check-border: rgba(255, 255, 255, .3); --tc-accent: #8e7cff; --tc-accent-bright: #37e6c7; --tc-accent-ink: #12123a; --tc-deep: #171b3d; --tc-deep-track: #2b2f5a; --tc-deep-sub: #9aa0e0; --tc-deep-ink: #eef0ff; --tc-shadow: 0 20px 50px rgba(20, 10, 60, .4); --tc-scrim: rgba(6, 8, 24, .6); --tc-r-card: 16px; --tc-r-run: 20px; --tc-r-cell: 12px; --tc-r-sheet: 28px; --tc-r-pill: 999px; }