/** * sys-tre.com Design System — tokens-dark.css * Phase 5-A 成果物 (2026-04-22) * * ダークモード対応レイヤー。 * 依存: tokens.css (先に読み込むこと) * * 起動条件 (OR): * - OS 設定が dark (prefers-color-scheme: dark) * - ルート要素に [data-theme="dark"] * * 戦略: * tokens.css 末尾の --ds-sem-* セマンティック層のみを上書きする。 * components.css / templates.css 側は var(--ds-sem-*) を参照することで * 自動追従する。ブランドカラー (--ds-primary など) は変えない。 * * 注意: * - 既存コンポーネントがハードコードで var(--ds-surface) 等を使っている箇所は * 段階的に --ds-sem-* へ置換する (Phase 5-B 以降)。 * - Hero / Footer は元々ダーク背景なので this レイヤー下でも破綻しない。 */ /* ============================================================ Trigger: OS auto ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* palette を展開 */ --ds-sem-bg: #0D0B09; --ds-sem-surface: #1E1810; --ds-sem-surface-raised: #2A2119; --ds-sem-text: #F8F5F4; --ds-sem-text-sub: #D4CFCA; --ds-sem-text-muted: #9B9691; --ds-sem-border: rgba(255, 255, 255, 0.12); --ds-sem-border-strong: rgba(255, 255, 255, 0.24); --ds-success-bg: rgba(22, 163, 74, 0.18); --ds-danger-bg: rgba(220, 38, 38, 0.18); --ds-warning-bg: rgba(245, 158, 11, 0.18); --ds-info-bg: rgba(37, 99, 235, 0.18); --ds-primary-bg: rgba(255, 122, 61, 0.14); --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --ds-shadow: 0 4px 24px rgba(0, 0, 0, 0.50); --ds-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.55); --ds-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.60); --ds-focus-ring: 0 0 0 3px rgba(255, 179, 135, 0.50); } } /* ============================================================ Trigger: manual [data-theme="dark"] (ユーザー設定 > OS 設定) ============================================================ */ :root[data-theme="dark"] { --ds-sem-bg: #0D0B09; --ds-sem-surface: #1E1810; --ds-sem-surface-raised: #2A2119; --ds-sem-text: #F8F5F4; --ds-sem-text-sub: #D4CFCA; --ds-sem-text-muted: #9B9691; --ds-sem-border: rgba(255, 255, 255, 0.12); --ds-sem-border-strong: rgba(255, 255, 255, 0.24); --ds-success-bg: rgba(22, 163, 74, 0.18); --ds-danger-bg: rgba(220, 38, 38, 0.18); --ds-warning-bg: rgba(245, 158, 11, 0.18); --ds-info-bg: rgba(37, 99, 235, 0.18); --ds-primary-bg: rgba(255, 122, 61, 0.14); --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --ds-shadow: 0 4px 24px rgba(0, 0, 0, 0.50); --ds-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.55); --ds-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.60); --ds-focus-ring: 0 0 0 3px rgba(255, 179, 135, 0.50); color-scheme: dark; } /* ============================================================ .ds スコープのベース背景 / 文字をセマンティックへ適用 (既存 tokens.css の .ds ルールは非破壊。上書きのみ。) ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ds { background-color: var(--ds-sem-bg); color: var(--ds-sem-text); } } :root[data-theme="dark"] .ds { background-color: var(--ds-sem-bg); color: var(--ds-sem-text); } /* ============================================================ High contrast override (WCAG AAA を目指すオプション) ============================================================ */ @media (prefers-contrast: more) { :root { --ds-sem-border: rgba(30, 24, 16, 0.50); --ds-sem-border-strong: rgba(30, 24, 16, 0.80); } :root[data-theme="dark"] { --ds-sem-border: rgba(255, 255, 255, 0.40); --ds-sem-border-strong: rgba(255, 255, 255, 0.70); } } /* ============================================================ Phase 5-A.6 VISUAL BOOST — ダーク時オーバーライド (2026-04-24) Shadow濃度+5-10%、Glow発光+10%、Pattern コントラスト調整 ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ds-shadow-pop: 0 8px 32px rgba(0, 0, 0, .55); --ds-shadow-float: 0 20px 60px -12px rgba(0, 0, 0, .65); --ds-shadow-card-3d: 0 2px 4px rgba(0,0,0,.40), 0 12px 28px -6px rgba(0,0,0,.60); --ds-shadow-glass: 0 1px 0 0 rgba(255,255,255,.10) inset, 0 -1px 0 0 rgba(0,0,0,.30) inset, 0 12px 40px -8px rgba(0, 0, 0, .65); --ds-glow-primary-strong: 0 0 44px rgba(255, 122, 61, .70), 0 0 14px rgba(255, 122, 61, .45); --ds-glow-gold: 0 0 36px rgba(255, 215, 0, .55); --ds-glow-teal: 0 0 36px rgba(8, 145, 178, .55); --ds-glow-indigo: 0 0 36px rgba(59, 92, 222, .55); --ds-bg-dots: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1.5px); --ds-bg-grid: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); --ds-bg-mesh-soft: radial-gradient(at 12% 18%, rgba(255,122,61,.30) 0px, transparent 45%), radial-gradient(at 82% 10%, rgba(59,92,222,.28) 0px, transparent 50%), radial-gradient(at 65% 88%, rgba(255,215,0,.18) 0px, transparent 48%), radial-gradient(at 15% 85%, rgba(8,145,178,.26) 0px, transparent 52%); --ds-glass-bg: rgba(255,255,255,.05); --ds-glass-bg-strong: rgba(255,255,255,.10); --ds-glass-border: rgba(255,255,255,.14); } } :root[data-theme="dark"] { --ds-shadow-pop: 0 8px 32px rgba(0, 0, 0, .55); --ds-shadow-float: 0 20px 60px -12px rgba(0, 0, 0, .65); --ds-shadow-card-3d: 0 2px 4px rgba(0,0,0,.40), 0 12px 28px -6px rgba(0,0,0,.60); --ds-shadow-glass: 0 1px 0 0 rgba(255,255,255,.10) inset, 0 -1px 0 0 rgba(0,0,0,.30) inset, 0 12px 40px -8px rgba(0, 0, 0, .65); --ds-glow-primary-strong: 0 0 44px rgba(255, 122, 61, .70), 0 0 14px rgba(255, 122, 61, .45); --ds-glow-gold: 0 0 36px rgba(255, 215, 0, .55); --ds-glow-teal: 0 0 36px rgba(8, 145, 178, .55); --ds-glow-indigo: 0 0 36px rgba(59, 92, 222, .55); --ds-bg-dots: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1.5px); --ds-bg-grid: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); --ds-bg-mesh-soft: radial-gradient(at 12% 18%, rgba(255,122,61,.30) 0px, transparent 45%), radial-gradient(at 82% 10%, rgba(59,92,222,.28) 0px, transparent 50%), radial-gradient(at 65% 88%, rgba(255,215,0,.18) 0px, transparent 48%), radial-gradient(at 15% 85%, rgba(8,145,178,.26) 0px, transparent 52%); --ds-glass-bg: rgba(255,255,255,.05); --ds-glass-bg-strong: rgba(255,255,255,.10); --ds-glass-border: rgba(255,255,255,.14); }