/* ============================================================================ 01-tokens.css ― デザイントークン（このサイトのすべての数値と色の出どころ） ---------------------------------------------------------------------------- このファイルには「見た目の定数」だけを置く。部品のスタイルは一切書かない。 構造は3階層: [1] 原色トークン --c-* 生の色。意味を持たない。 [2] 意味トークン --color-* 「背景」「文字」など役割で呼ぶ名前。 [3] 寸法トークン --space-* など 部品(04-components.css)は [2][3] しか参照しない。 → 色を変えたいとき [1] の数個をいじれば全部品に伝わる、という作りにしている。 ========================================================================== */ /* ── @property: 変数に「型」を教える宣言 ───────────────────────────────── ふつうの CSS 変数はただの文字列なので、途中の値を計算できない＝アニメが カクつく。@property で型を宣言すると、ブラウザが角度として補間できる。 */ @property --ring-angle { syntax: ''; initial-value: 0deg; inherits: false; } :root { /* ══ [1] 原色トークン ════════════════════════════════════════════════ 色を hsl() の部品に分解して持つのがコツ。 色相(h)だけを変数にしておくと、--brand-h を1つ動かすだけで ブランド色10段が丸ごと別の色に移る。（ページ下部の実験パネルで体験可） */ --brand-h: 212; /* 色相 0-360。212 = 藍 */ --brand-s: 54%; /* 彩度 */ --accent-h: 32; /* 差し色の色相。32 = 山吹 */ --accent-s: 58%; --gray-h: 220; /* 灰色にもわずかに青を混ぜる。純グレーは安っぽい */ --gray-s: 13%; --c-brand-50: hsl(var(--brand-h) calc(var(--brand-s) - 20%) 96%); --c-brand-100: hsl(var(--brand-h) calc(var(--brand-s) - 14%) 90%); --c-brand-200: hsl(var(--brand-h) calc(var(--brand-s) - 8%) 80%); --c-brand-300: hsl(var(--brand-h) var(--brand-s) 66%); --c-brand-400: hsl(var(--brand-h) var(--brand-s) 52%); --c-brand-500: hsl(var(--brand-h) var(--brand-s) 38%); --c-brand-600: hsl(var(--brand-h) var(--brand-s) 31%); --c-brand-700: hsl(var(--brand-h) var(--brand-s) 24%); --c-brand-800: hsl(var(--brand-h) var(--brand-s) 17%); --c-brand-900: hsl(var(--brand-h) var(--brand-s) 11%); --c-accent-200: hsl(var(--accent-h) calc(var(--accent-s) - 10%) 84%); --c-accent-400: hsl(var(--accent-h) var(--accent-s) 60%); --c-accent-500: hsl(var(--accent-h) var(--accent-s) 47%); --c-accent-600: hsl(var(--accent-h) var(--accent-s) 37%); --c-gray-0: #ffffff; --c-gray-50: hsl(var(--gray-h) var(--gray-s) 97.5%); --c-gray-100: hsl(var(--gray-h) var(--gray-s) 94%); --c-gray-200: hsl(var(--gray-h) var(--gray-s) 88%); --c-gray-300: hsl(var(--gray-h) var(--gray-s) 78%); --c-gray-400: hsl(var(--gray-h) var(--gray-s) 63%); --c-gray-500: hsl(var(--gray-h) var(--gray-s) 48%); --c-gray-600: hsl(var(--gray-h) var(--gray-s) 37%); --c-gray-700: hsl(var(--gray-h) var(--gray-s) 27%); --c-gray-800: hsl(var(--gray-h) var(--gray-s) 17%); --c-gray-900: hsl(var(--gray-h) var(--gray-s) 11%); --c-gray-950: hsl(var(--gray-h) var(--gray-s) 7%); /* 状態色。ブランド色とは独立させる（ブランドの色相を回しても 「エラーは赤」が保たれるように、意図的に hsl 変数から切り離す） */ --c-success: #2f8f5b; --c-success-bg: #e6f4ec; --c-warning: #b8791f; --c-warning-bg: #fbf1de; --c-danger: #c0453f; --c-danger-bg: #fbeae9; --c-info: #2d6ea8; --c-info-bg: #e7f0f9; /* ══ [2] 意味トークン（ライトテーマ）══════════════════════════════════ 部品側はここだけを見る。ダークテーマではこのブロックだけを差し替える。 */ --color-bg: var(--c-gray-50); /* ページの地色 */ --color-bg-alt: var(--c-gray-100); /* 帯で色を変えたい区画 */ --color-surface: var(--c-gray-0); /* カードの面 */ --color-surface-2: var(--c-gray-50); /* カードの中のさらに一段奥 */ --color-surface-inv: var(--c-brand-900); /* 反転した面（CTA帯など） */ --color-border: var(--c-gray-200); --color-border-strong: var(--c-gray-300); --color-text: var(--c-gray-900); --color-text-muted: var(--c-gray-600); --color-text-faint: var(--c-gray-500); --color-text-inv: var(--c-gray-0); --color-brand: var(--c-brand-500); --color-brand-hover: var(--c-brand-600); --color-brand-soft: var(--c-brand-50); --color-on-brand: #ffffff; /* ブランド色の上に載る文字 */ --color-accent: var(--c-accent-500); --color-accent-soft: hsl(var(--accent-h) var(--accent-s) 94%); --color-ring: var(--c-brand-400); /* キーボード操作時の枠 */ /* 影は「色」と「形」を分けて持つ。ダークでは色だけ濃くする */ --shadow-color: var(--gray-h) 30% 12%; --shadow-1: 0 1px 2px hsl(var(--shadow-color) / .07); --shadow-2: 0 1px 2px hsl(var(--shadow-color) / .05), 0 6px 16px -8px hsl(var(--shadow-color) / .18); --shadow-3: 0 1px 3px hsl(var(--shadow-color) / .06), 0 18px 40px -22px hsl(var(--shadow-color) / .40); /* ══ [3] 寸法トークン ════════════════════════════════════════════════ 余白は「基準の1つ」から calc() で全部作る。 --space-unit を 4px→6px にすると、サイト全体の呼吸が一斉に広がる。 */ --space-unit: 4px; --space-1: calc(var(--space-unit) * 1); /* 4px */ --space-2: calc(var(--space-unit) * 2); /* 8px */ --space-3: calc(var(--space-unit) * 3); /* 12px */ --space-4: calc(var(--space-unit) * 4); /* 16px */ --space-5: calc(var(--space-unit) * 5); /* 20px */ --space-6: calc(var(--space-unit) * 6); /* 24px */ --space-8: calc(var(--space-unit) * 8); /* 32px */ --space-10: calc(var(--space-unit) * 10); /* 40px */ --space-12: calc(var(--space-unit) * 12); /* 48px */ --space-16: calc(var(--space-unit) * 16); /* 64px */ --space-20: calc(var(--space-unit) * 20); /* 80px */ /* 角丸も基準の1つから */ --radius-unit: 4px; --radius-sm: calc(var(--radius-unit) * 1); --radius-md: calc(var(--radius-unit) * 2); --radius-lg: calc(var(--radius-unit) * 3); --radius-xl: calc(var(--radius-unit) * 5); --radius-pill: 999px; /* 文字 */ --font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", serif; --font-body: "Zen Kaku Gothic New", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --fs-root: 16px; /* html の基準。rem の元 */ --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); --fs-3xl: clamp(1.75rem, 1.30rem + 2.0vw, 2.6rem); --fs-4xl: clamp(2.20rem, 1.40rem + 3.6vw, 3.6rem); --leading-tight: 1.3; --leading-snug: 1.55; --leading-body: 1.85; --tracking-wide: .16em; /* レイアウト */ --content-max: 1140px; /* 中身の最大幅 */ --gutter: clamp(16px, 4vw, 32px); /* 左右の外側余白 */ --header-h: 60px; /* 追従ヘッダーの高さ */ --section-gap: clamp(56px, 7vw, 96px); /* 区画どうしの間隔 */ --grid-min: 260px; /* 自動折返しグリッドの最小列幅 */ /* 動き */ --dur-1: 120ms; --dur-2: 240ms; --ease-out: cubic-bezier(.2, .7, .3, 1); --ease-spring: cubic-bezier(.34, 1.4, .5, 1); --z-header: 100; --z-panel: 200; --z-toast: 300; } /* ══ ダークテーマ ══════════════════════════════════════════════════════ 差し替えるのは [2] 意味トークンだけ。部品の CSS は1行も書き換えない。 ・OS がダーク かつ 明示指定なし … 下の media クエリが当たる ・ボタンで明示指定 … data-theme が当たる（media より後ろなので勝つ） */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: var(--c-gray-950); --color-bg-alt: var(--c-gray-900); --color-surface: hsl(var(--gray-h) var(--gray-s) 10.5%); --color-surface-2: hsl(var(--gray-h) var(--gray-s) 13.5%); --color-surface-inv: var(--c-brand-100); --color-border: hsl(var(--gray-h) var(--gray-s) 20%); --color-border-strong: hsl(var(--gray-h) var(--gray-s) 30%); --color-text: hsl(var(--gray-h) 18% 93%); --color-text-muted: hsl(var(--gray-h) 12% 72%); --color-text-faint: hsl(var(--gray-h) 10% 56%); --color-text-inv: var(--c-gray-950); --color-brand: hsl(var(--brand-h) calc(var(--brand-s) + 10%) 68%); --color-brand-hover: hsl(var(--brand-h) calc(var(--brand-s) + 10%) 76%); --color-brand-soft: hsl(var(--brand-h) 34% 18%); --color-on-brand: hsl(var(--brand-h) 45% 10%); --color-accent: hsl(var(--accent-h) calc(var(--accent-s) + 12%) 62%); --color-accent-soft: hsl(var(--accent-h) 34% 18%); --color-ring: hsl(var(--brand-h) 70% 66%); --c-success-bg: hsl(150 30% 15%); --c-warning-bg: hsl(38 34% 16%); --c-danger-bg: hsl(2 34% 17%); --c-info-bg: hsl(208 34% 17%); --c-success: hsl(150 45% 62%); --c-warning: hsl(38 62% 62%); --c-danger: hsl(2 65% 68%); --c-info: hsl(208 62% 68%); --shadow-color: var(--gray-h) 40% 2%; --shadow-1: 0 1px 2px hsl(var(--shadow-color) / .5); --shadow-2: 0 1px 2px hsl(var(--shadow-color) / .4), 0 6px 16px -8px hsl(var(--shadow-color) / .7); --shadow-3: 0 1px 3px hsl(var(--shadow-color) / .5), 0 18px 40px -22px hsl(var(--shadow-color) / .95); } } :root[data-theme="dark"] { --color-bg: var(--c-gray-950); --color-bg-alt: var(--c-gray-900); --color-surface: hsl(var(--gray-h) var(--gray-s) 10.5%); --color-surface-2: hsl(var(--gray-h) var(--gray-s) 13.5%); --color-surface-inv: var(--c-brand-100); --color-border: hsl(var(--gray-h) var(--gray-s) 20%); --color-border-strong: hsl(var(--gray-h) var(--gray-s) 30%); --color-text: hsl(var(--gray-h) 18% 93%); --color-text-muted: hsl(var(--gray-h) 12% 72%); --color-text-faint: hsl(var(--gray-h) 10% 56%); --color-text-inv: var(--c-gray-950); --color-brand: hsl(var(--brand-h) calc(var(--brand-s) + 10%) 68%); --color-brand-hover: hsl(var(--brand-h) calc(var(--brand-s) + 10%) 76%); --color-brand-soft: hsl(var(--brand-h) 34% 18%); --color-on-brand: hsl(var(--brand-h) 45% 10%); --color-accent: hsl(var(--accent-h) calc(var(--accent-s) + 12%) 62%); --color-accent-soft: hsl(var(--accent-h) 34% 18%); --color-ring: hsl(var(--brand-h) 70% 66%); --c-success-bg: hsl(150 30% 15%); --c-warning-bg: hsl(38 34% 16%); --c-danger-bg: hsl(2 34% 17%); --c-info-bg: hsl(208 34% 17%); --c-success: hsl(150 45% 62%); --c-warning: hsl(38 62% 62%); --c-danger: hsl(2 65% 68%); --c-info: hsl(208 62% 68%); --shadow-color: var(--gray-h) 40% 2%; --shadow-1: 0 1px 2px hsl(var(--shadow-color) / .5); --shadow-2: 0 1px 2px hsl(var(--shadow-color) / .4), 0 6px 16px -8px hsl(var(--shadow-color) / .7); --shadow-3: 0 1px 3px hsl(var(--shadow-color) / .5), 0 18px 40px -22px hsl(var(--shadow-color) / .95); }