/* * 共通デザイントークン。 * * ここは「全ページで同一だった値」だけを置く。ページごとに値が違うトークン * （privacy の --max / --muted / --line、404 の --line / --soft / --dark、 * 各ページの --dark / --form-max / --radius-* など）は統一せず、 * 従来どおり各ページCSSの :root に残して上書きさせる。 * * 読み込み順: scripts/build-local-staging.mjs が 直後に注入するため、 * 常にページCSSより前に来る。ページ側の :root と @media 内 :root が後勝ちする。 */ :root { --ink: #111111; --ink-2: #1b1b1b; --text: #4f4f4f; /* * 補助テキスト用のグレー。#727272 は最も多い下地 --soft (#f7f7f7) の上で * 4.49:1 しかなく AA(4.5) をわずかに割っていた。#6f6f6f にすると * #f7f7f7 上 4.69 / #ffffff 上 4.95 / #f3f4f5 上 4.56 で全て満たす。 * 明度差は3段階なので見た目の階層は変わらない。 */ --muted: #6f6f6f; --line: #e1e1e1; --line-strong: #c9c9c9; --paper: #ffffff; --paper-2: #fcfcfc; --soft: #f7f7f7; --soft-2: #efefef; /* * --orange は面・罫線・アイコン・ホバー背景用。値を変えないこと。 * --orange-text は「明るい面に乗る文字」専用の派生。#ffffff で 5.28:1、 * #f7f7f7 で 4.94:1、オレンジ10%ティント #fef2ea で 4.79:1。 * 暗い面では #f57e35 のほうがコントラストが高いため、暗い面の文字は * --orange のままにしてある。 */ --orange: #f57e35; --orange-soft: rgba(245, 126, 53, 0.12); --orange-dark: #b64b10; --orange-text: #b64b10; --blue: #0d6fc2; --max: 1200px; --gutter: 32px; --duration: 240ms; --ease: cubic-bezier(0.2, 0, 0, 1); }