/* ========================================================================== FMS デザイントークン (工程C / M0 第1号) -------------------------------------------------------------------------- 11番「デザイントークン意思決定書(工程B-1)」を実装に落とした定義ファイル。 読み込み位置: Bootstrap直後・自前CSS群の前(変数定義のみでカスケード影響なし)。 ■ 色の最終決定(D1: F/A/B版)について - :root{} に「有効値」として置くのは F版(公式サイト実測)の9段グリーンのみ。 - A版・B版の値は本ファイル内にコメントとして併記する(有効定義を並存させない)。 - D1確定後は :root{} のグリーン9値をF/A/B間で「そのまま書き換えるだけ」で完結し、 HTML/JS は一切変更不要(セマンティック層が primitive を参照しているため自動追従)。 - グリーン以外(gray/機能色/space/radius/motion/z/text)は F/A/B で不変・確定済みのため 全収録する(11番の裁定 2-7(2))。 - 適用は M0 スコープ厳守: 参照するのは今回の新規部品(縦持ちスプラッシュ・chat-join制御) のみ。既存部品(ヘッダー/チャット/fvLivePlayer等)への適用は M1 以降。 ========================================================================== */ /* (追記) [注意] 冒頭の「M0 スコープ厳守(既存部品への適用は M1 以降)」は作成時点の記述。 現在は M1/M2 適用済みで、style.css / youtube-comments.css / paddock-seeker.css 等の既存部品も var(--fms-*) を参照している(フォールバック値付き)。値の変更はサイト全体の配色に波及する。 */ :root { /* ====================================================================== プリミティブ: グリーンスケール ★現在の既定 = B版(青緑 hue≈160°) — D1暫定決定 2026-07-07★ F版(公式実測)/A版(黄緑)へは dev/switch_palette.sh F|A で切替可(下にコメントで併記)。 ※インラインのコメントは版で変わらない「役割」を示す(具体的なhex/コントラスト比は 版で変わるため記さない。値そのものは 12番3版比較表 を参照)。 ---------------------------------------------------------------------- */ --fms-green-50: #EAF6F1; --fms-green-100: #CFEADF; --fms-green-300: #7ED7B8; --fms-green-400: #5DCAA5; /* active: 選択中・DVR・見たい馬・検出ドット */ --fms-green-500: #0B845C; /* brand: 信号(ロゴ帯・見出し・装飾)。面に使いすぎない */ --fms-green-600: #0B7050; --fms-green-700: #0A5C41; /* action: 白文字ボタン標準背景・リンクhover・リンクon白 */ --fms-green-800: #0C5740; /* surface: 深緑の面(チャットヘッダー・選択済みパネル) */ --fms-green-900: #073B2C; /* --- RGB成分版(rgba()での薄い塗り/枠に使用。M1/M2のhover背景・薄枠が参照) --- switch_palette.sh が上のhex 9値と一緒にこの4値も同版へ書き換える。 */ --fms-color-action-rgb: 10, 92, 65; /* = green-700(action) */ --fms-color-surface-rgb: 12, 87, 64; /* = green-800(surface) */ --fms-color-active-rgb: 93, 202, 165; /* = green-400(active) */ --fms-green-600-rgb: 11, 112, 80; /* = green-600 */ /* --- A版候補(黄緑 hue≈137° / 現行FMSの顔#58A76Eを維持): D1でA採用時は上の9値をこれに置換 --- ※A版は「白on500=3.5:1 ❌」「500文字on白=2.9:1 ❌」。ボタン・リンクは必ず 700 を使う。 --fms-green-50: #EAF5EE; --fms-green-100: #CFE9DA; --fms-green-300: #83C69D; --fms-green-400: #63B983; --fms-green-500: #58A76E; --fms-green-600: #3F8A57; --fms-green-700: #2F6B43; --fms-green-800: #1E4A2E; --fms-green-900: #12301D; RGB版: --fms-color-action-rgb:47,107,67; --fms-color-surface-rgb:30,74,46; --fms-color-active-rgb:99,185,131; --fms-green-600-rgb:63,138,87; */ /* --- F版候補(公式実測 hue≈146°): F採用/比較へは dev/switch_palette.sh F で復帰 --- ※B(既定)採用前の元・有効値。参考として保存。 --fms-green-50: #EAF5EE; --fms-green-100: #B9E3CC; --fms-green-300: #5FBE85; --fms-green-400: #A2D02C; --fms-green-500: #00893B; --fms-green-600: #00722F; --fms-green-700: #00612B; --fms-green-800: #00451E; --fms-green-900: #002E13; RGB版: --fms-color-action-rgb:0,97,43; --fms-color-surface-rgb:0,69,30; --fms-color-active-rgb:162,208,44; --fms-green-600-rgb:0,114,47; */ /* ====================================================================== プリミティブ: ニュートラル(F/A/B不変) ※11番 3-3 ---------------------------------------------------------------------- */ --fms-black: #000000; /* 映像レターボックス専用の予約色。映像領域外での新規使用禁止 */ --fms-gray-950: #0D0D0D; --fms-gray-900: #1A1A1A; --fms-gray-800: #262626; --fms-gray-700: #333333; --fms-gray-600: #454545; --fms-gray-disabled: #7C848C; /* 「無効・非アクティブ」の意味色 */ --fms-gray-400: #A0A0A5; --fms-gray-300: #CFCFD2; --fms-gray-200: #E0E0E3; --fms-gray-100: #F5F5F6; --fms-white: #FFFFFF; /* ====================================================================== プリミティブ: 機能色(F/A/B不変) ※11番 3-4 ---------------------------------------------------------------------- */ --fms-color-live: #FF3B30; /* ライブ/生/オンエア。全部品この1色 */ --fms-color-danger: #E53935; --fms-color-danger-soft: #FF7A70; --fms-color-warning: #FFC107; --fms-color-link-on-dark: #00A5D0; --fms-color-focus: #7FB6FF; /* ====================================================================== プリミティブ: 金(装飾) ---------------------------------------------------------------------- */ /* ★暫定★ 11番未批准の装飾トークン(D1のグリーン決定とは独立)。 現行の金グラデ見出し「観たい映像ワンタッチ!」は bitmap(tutorial_new.jpg)内に 焼き込まれており CSS実値が存在しないため、A案レイアウト(Splash_sp_portlate_A.png) から近似サンプリングした値。11番文書へ正式追記予定(最終値は完了報告に記載)。 ※船橋側のブランドカラー規定の確認結果次第で将来差し替える可能性がある。 */ --fms-deco-gold-1: #F3E1A6; /* 明(グラデ上端) */ --fms-deco-gold-2: #C8A24B; /* 暗(グラデ下端) */ /* ====================================================================== セマンティック層(役割名 → primitive を参照。部品はこちらを参照する) ※12番 §1 の色の使い分け文法。D1でグリーンが変われば自動追従。 ---------------------------------------------------------------------- */ --fms-color-brand: var(--fms-green-500); /* 信号: ロゴ帯・見出し・装飾。面に使いすぎない */ --fms-color-action: var(--fms-green-700); /* 白文字ボタン標準背景・リンク文字on白 */ --fms-color-surface: var(--fms-green-800); /* 深緑の面: チャットヘッダー・選択済みパネル */ --fms-color-active: var(--fms-green-400); /* 選択中・アクティブ・検出ドット */ --fms-color-on-brand: var(--fms-white); /* brand/action/surface 面上の文字 */ /* ====================================================================== タイポグラフィ ※11番 4 (単位px固定・remは禁止 / 10pxの新規使用禁止=下限11px) ---------------------------------------------------------------------- */ --fms-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --fms-text-2xs: 11px; --fms-text-xs: 12px; --fms-text-sm: 13px; --fms-text-md: 14px; --fms-text-lg: 16px; --fms-text-xl: 20px; --fms-text-2xl: 24px; --fms-weight-normal: 400; --fms-weight-semibold: 600; --fms-weight-bold: 700; --fms-leading-tight: 1.1; /* チップ・ボタン */ --fms-leading-normal: 1.4; /* 本文 */ /* ====================================================================== スペーシング(4pxグリッド) ※11番 5 ---------------------------------------------------------------------- */ --fms-space-05: 2px; --fms-space-1: 4px; --fms-space-15: 6px; --fms-space-2: 8px; --fms-space-3: 12px; --fms-space-4: 16px; --fms-space-6: 24px; --fms-space-8: 32px; /* ====================================================================== 形状(角丸・枠線) ※11番 6 ---------------------------------------------------------------------- */ --fms-radius-xs: 2px; --fms-radius-sm: 4px; --fms-radius-md: 8px; --fms-radius-pill: 999px; --fms-radius-circle: 50%; --fms-border-thin: 1px; --fms-border-thick: 2px; /* ====================================================================== エレベーション(影) ※11番 7 ---------------------------------------------------------------------- */ --fms-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --fms-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --fms-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.45); --fms-glow-active: 0 0 5px rgba(162, 208, 44, 0.7); /* ====================================================================== モーション ※11番 8 ---------------------------------------------------------------------- */ --fms-motion-fast: 120ms; --fms-motion-base: 200ms; --fms-motion-slow: 300ms; --fms-ease: ease; --fms-ease-emph: cubic-bezier(0.32, 0.72, 0, 1); /* ====================================================================== z-index(凍結宣言: 現行値に名前を付与。新しい数値の発明禁止) ※11番 9 ---------------------------------------------------------------------- */ --fms-z-cover: 100; --fms-z-error: 1000; --fms-z-thumbs: 1200; --fms-z-dock: 1300; --fms-z-pill: 1310; --fms-z-coach: 1320; --fms-z-resume: 1500; --fms-z-splash: 1600; }