/* ========================================================================= My Design System — Design Tokens(単一ソース / Single Source of Truth) ------------------------------------------------------------------------- 方針: - ソフト質感(暖色グレー + inset/card シャドウ)。 - ニュートラルは1セット共通。フロント/管理の違いは「ページ背景色」だけ。 - テーマカラーは4色(red/blue/green/amber)。各色 tint/base/hover/deep の4段階。プロジェクトごとに1テーマを選ぶ。 - ページ幅は3パターン(site / app / fluid)。data-layout で切り替える。使い方: - 環境: か - テーマ: (red / green / amber も可) - 幅: (app / fluid も可 / 省略時は site) 注意: - 値をハードコードせず、必ず var(--...) を参照すること。 ========================================================================= */ :root { /* ------------------------------------------------------------- ニュートラルフロント・管理で不変(共通1セット) */ --color-surface: #e8e6e4; /* カード・入力欄などの面 */ /* surface の上に重ねる面(入れ子のカード・カード上の入力欄)。 surface と同じ赤みの刻み(R+2 G+2 B)で一段明るくした値。白(--color-on)だと暖色グレーの中で浮くため、その手前で止める。 */ --color-surface-raised: #f2f0ee; --color-bg-strong: #dbdbdb; /* タブ帯などの強い面 */ --color-ink: #343030; /* テキスト色かつボタンの色(共有) */ --color-on: #ffffff; /* ボタン文字 / より重要なものの背景 */ --color-subtext: #827f7f; /* サブテキスト */ /* --------------------------------------------------------------- ページ背景環境で切り替わるのはここだけ。既定はフロント。管理画面は body[data-env="admin"] で上書き(下部参照)。 */ --color-page-bg: #e0ddda; /* -------------------------------------------------------------------- シャドウ */ --shadow-card: 2px 2px 6px 0 rgba(66, 56, 56, 0.10); /* 浮き(カード等) */ --shadow-inset: inset 1px 1px 4px 0 rgba(66, 56, 56, 0.25); /* 凹み */ /* -------------------------------------------------------------------- 状態色(semantic) テーマとは独立。どのテーマでも共通(例: 削除は常に同じ赤)。 */ --color-danger: #d93100; /* 危険操作(削除など) */ --color-danger-hover: #b82a00; /* danger の hover(派生) */ /* -------------------------------------------------------------------- 角丸(radius) */ --radius-sm: 6px; /* バッジの角・入力内の小要素・小タイル */ --radius-md: 10px; /* ボタン・入力欄・タブ(基準) */ --radius-lg: 24px; /* カード・パネル(大きめ) */ --radius-pill: 999px; /* ピル・丸バッジ */ /* -------------------------------------------------------------------- 余白(spacing) フィーリング重視の3段階のみ。中間値は作らない。 */ --space-inline: 8px; /* 横並び要素(ボタン列など)の間隔 */ --space-group: 40px; /* 中規模のまとまりの区切り */ --space-section: 80px; /* セクションごとの大きな区切り */ /* -------------------------------------------------------------------- レイアウト(layout) ページ幅の基準。3パターンをで切り替える。 site … オープンなWEBサイト(既定 / data-layout 省略可) 最大 1000px app … スマホ幅で使うWEBアプリ最大 420px fluid … 全画面で使うWEBアプリ(サイドバー型など) 上限なし左右の余りは vw ではなく % を使う。vw はスクロールバー幅を含むため、縦スクロールが出た瞬間に横スクロールバーが発生してしまう。 */ --layout-max: 1000px; /* コンテナの最大幅 */ --layout-width: 94%; /* コンテナの基本幅(画面に対する割合) */ --layout-read: 800px; /* 本文の可読幅(長文はこの幅で折り返す) */ /* ブレークポイント(参考値) CSS カスタムプロパティは @media 条件では使えないため、値は直書きする。 768px … 主(PC / SP の切り替え) 600px … 補助(細かい調整用) */ /* -------------------------------------------------------------------- 文字(typography) サイズ5種 + 字間2種 + 行間2種。役割ごとの組み合わせは ai/tokens/typography.md 参照。 */ --text-caption: 13px; /* キャプション・補助 */ --text-body: 15px; /* 本文(基準) */ --text-button: 17px; /* ボタン */ /* 小見出し(見出しと本文の間)。今は --text-button と同じ 17px だが、役割が違うので別トークンにしておく(片方だけ動かせるように)。 */ --text-subheading: 17px; --text-heading: 20px; /* 見出し */ --text-title: 28px; /* 大見出し・ページタイトル */ --tracking-body: 0.02em; /* 本文・キャプション・ボタン */ --tracking-heading: 0.05em; /* 見出し以上 */ --leading-body: 1.6em; /* 本文・キャプション */ --leading-tight: 1.4em; /* ボタン・見出し以上 */ /* =========================================================== テーマカラー(固定4色) 各色 tint(薄い下地) / base(アクセント基本) / hover / deep(濃い文字・押下) */ /* Red */ --theme-red-tint: #e8baba; --theme-red-base: #d14d4d; --theme-red-hover: #b83f3f; --theme-red-deep: #8f2f2f; /* Blue */ --theme-blue-tint: #b1c8eb; --theme-blue-base: #2f5cc6; --theme-blue-hover: #284ea8; --theme-blue-deep: #203f87; /* Green */ --theme-green-tint: #a2dac3; --theme-green-base: #1ca96e; --theme-green-hover: #18905e; --theme-green-deep: #13734b; /* Amber */ --theme-amber-tint: #ebd398; --theme-amber-base: #e0a40e; --theme-amber-hover: #be8b0c; --theme-amber-deep: #986f0a; /* ----------------------------------------------------- アクティブテーマ(既定 = blue) コンポーネントは個別色ではなく、この4トークンを参照する。 data-theme で下部の定義に切り替わる。 */ --theme-tint: var(--theme-blue-tint); --theme-base: var(--theme-blue-base); --theme-hover: var(--theme-blue-hover); --theme-deep: var(--theme-blue-deep); /* テーマ base の上に置く文字色。アクセントボタン等はプライマリと揃えて常に on(白)。 */ --theme-on: var(--color-on); } /* -------------------------------------------------------- 環境:管理画面(背景のみ) */ [data-env="admin"] { --color-page-bg: #bdbab7; } /* ------------------------------------------------------------- レイアウト切り替え site は :root の既定値をそのまま使うため、定義は不要。 */ [data-layout="app"] { --layout-max: 420px; } [data-layout="fluid"] { --layout-max: none; --layout-width: 100%; } /* ------------------------------------------------------------- テーマ切り替え */ [data-theme="red"] { --theme-tint: var(--theme-red-tint); --theme-base: var(--theme-red-base); --theme-hover: var(--theme-red-hover); --theme-deep: var(--theme-red-deep); --theme-on: var(--color-on); } [data-theme="blue"] { --theme-tint: var(--theme-blue-tint); --theme-base: var(--theme-blue-base); --theme-hover: var(--theme-blue-hover); --theme-deep: var(--theme-blue-deep); --theme-on: var(--color-on); } [data-theme="green"] { --theme-tint: var(--theme-green-tint); --theme-base: var(--theme-green-base); --theme-hover: var(--theme-green-hover); --theme-deep: var(--theme-green-deep); --theme-on: var(--color-on); } [data-theme="amber"] { --theme-tint: var(--theme-amber-tint); --theme-base: var(--theme-amber-base); --theme-hover: var(--theme-amber-hover); --theme-deep: var(--theme-amber-deep); }