@charset "utf-8"; /* ================================================================= * tokens.css — 色・サイズ・z-indexの定義一元管理 * * 【重要原則】 * 色値 (#xxxxxx) と z-index の生数値は、このファイルでのみ書く。 * 他のCSSファイルからは必ず var(--xxx) 経由で参照する。 * * 全CSSの先頭で読み込むこと。 * * 構造: * 1. プリミティブ変数: 生の色 (--blue-500, --gray-100, ...) * → 各色は名前+トーン番号。値の単一情報源。 * 2. セマンティック変数: 用途を持った色 (--primary, --danger, ...) * → コンポーネント側からは原則こちらだけを参照する。 * → テーマで上書きされる対象。 * 3. 機能固定色: ファイル種別、ローダー等のテーマ非依存色 * 4. 後方互換変数: 旧変数名 (--main-color など) * 5. 非色トークン: 角丸、影、z-index、フォント * * テーマ: * default (省略時) と dark の2種類。 * で適用、JSで動的切替も可能。 * ================================================================= */ :root { /* ============================================================= * 1. プリミティブ変数 (生の色) * 全ての色値はここに集約。直接参照せずセマンティック経由を推奨。 * ============================================================= */ /* -- Blue (メインブランド) -- */ --blue-50: #F4F9FD; --blue-100: #ECF1F9; --blue-200: #DCECF9; --blue-300: #8BAFC5; /* schedule_m repeat-comment ボーダー */ --blue-400: #4873C1; --blue-500: #3276b1; --blue-600: #2E4D87; --blue-700: #245582; --blue-800: #003366; /* ファイル MP4 アイコン */ --blue-850: #003399; /* ファイル DOC アイコン */ /* -- Cyan -- */ --cyan-300: #DCECF1; --cyan-350: #EEF7F9; /* datepicker 土曜背景 */ --cyan-400: #3399FF; --cyan-450: #489AB5; /* schedule_m 土曜文字 */ --cyan-500: #3082C5; --cyan-550: #0066CC; /* mobile version 文字 */ --cyan-600: #339999; --cyan-650: #0099CC; /* schedule_m color-1 */ --cyan-700: #006CD8; /* markdown リンク */ --cyan-750: #2F90F4; /* markdown リンク hover */ /* -- Gray -- */ --gray-0: #ffffff; --gray-25: #FEFEFE; /* overlay 微白 */ --gray-50: #f5f5f5; --gray-60: #f9f9f9; /* product-result 背景 */ --gray-75: #f3f3f3; /* schedule 印刷時ヘッダ */ --gray-100: #f0f0f0; --gray-125: #EFEFEF; /* markdown コード背景 */ --gray-150: #eeeeee; --gray-175: #EBEADB; /* UI dialog ロード時 */ --gray-200: #e9e9e9; --gray-250: #d1d1d1; /* googleDoc ボーダー */ --gray-300: #e0e0e0; --gray-350: #BDB79D; /* aw-grid 無効ボタン文字 */ --gray-400: #cccccc; --gray-450: #c0c0c0; --gray-500: #999999; --gray-550: #909090; --gray-600: #666666; --gray-650: #505050; --gray-680: #4c494c; /* googleDoc 背景 */ --gray-700: #555555; --gray-750: #444444; --gray-800: #333333; --gray-850: #8f8f8f; /* sub-panel 背景 */ --gray-900: #000000; /* -- Red -- */ --red-50: #FDF2F3; --red-100: #FEEFE9; --red-150: #FEF4F1; /* datepicker 日曜背景 */ --red-300: #FF9999; --red-400: #FF3300; --red-450: #F93722; /* schedule_m offday 文字 */ --red-500: #CC0000; --red-550: #E84C3D; /* スピナー赤 */ --red-600: #CC3300; --red-650: #993300; /* ファイル PPT アイコン */ --red-700: #990000; /* -- Orange -- */ --orange-300: #F2C100; /* schedule_m 鍵アイコン */ --orange-400: #FF9900; --orange-450: #F1C40F; /* スピナー黄 */ --orange-500: #FEBF01; --orange-550: #996600; /* ファイル JPG アイコン */ --orange-600: #CC6600; /* -- Yellow -- */ --yellow-300: #FFC; /* schedule_m repeat-comment 背景 */ --yellow-400: #FFCC00; --yellow-500: #FFFF00; --yellow-600: #FF0; /* network-info マーク */ /* -- Green -- */ --green-400: #66CC33; --green-450: #3F9472; /* mm-switch チェック */ --green-475: #339900; /* nav.success */ --green-500: #009900; --green-550: #2FCC71; /* スピナー緑 */ --green-600: #669966; --green-650: #336633; /* ファイル XLS アイコン */ --green-700: #336699; /* -- Pink -- */ --pink-300: #FDE6DF; --pink-500: #EF897A; /* -- Purple -- */ --purple-500: #660099; /* ファイル ZIP アイコン */ /* -- ユーティリティクラス専用の生色 (.fc-XXX / .bg-XXX で使用) -- * これらは color.css の .fc-* / .bg-* クラスでのみ使う。 * クラス名と16進値が対応している (例: .fc-969 → #996699) ので * 色名は (-util) サフィックスで分かりやすく。 */ --util-0078d7: #0078D7; /* .blue */ --util-996699: #996699; /* .fc-969 / .bg-969 */ --util-cccc99: #CCCC99; /* .fc-cc9 / .bg-cc9 */ --util-999900: #999900; /* .fc-990 / .bg-990 / schedule_m .color-2 */ --util-996633: #996633; /* .fc-963 / .bg-963 */ --util-99cc99: #99CC99; /* .fc-9c9 / .bg-9c9 */ --util-ff0000: #ff0000; /* .bg-f00 */ /* -- ブランド固定色 (テーマ切替で変えてはいけない色) -- */ --brand-line: #06C755; /* ============================================================= * 2. セマンティック変数 (用途別) * コンポーネントからはこれらを参照する。 * ダークテーマで値が変わる。 * ============================================================= */ /* -- primary (メインカラー) -- */ --primary: var(--blue-500); --primary-light: var(--blue-50); --primary-medium: var(--blue-200); --primary-dark: var(--blue-700); /* -- surface (背景・面) -- */ --surface: var(--gray-0); --surface-alt: var(--gray-100); --surface-sunken: var(--gray-150); /* サイドバー専用背景 (旧 #sidebar の #999 背景) */ --sidebar-bg: var(--gray-500); --sidebar-text: var(--gray-300); /* -- text (文字色) -- */ --text: var(--gray-900); --text-muted: var(--gray-500); --text-subtle: var(--gray-600); --text-on-primary: var(--gray-0); /* primary背景上のラベル等。常に明色を想定 */ /* -- border -- */ --border: var(--gray-300); --border-strong: var(--gray-450); --border-subtle: var(--gray-200); /* -- ステータス -- */ --danger: var(--red-500); --danger-strong: var(--red-600); /* CC3300 系 */ --danger-light: var(--red-50); --warning: var(--orange-500); --warning-soft: var(--orange-300); --success: var(--green-500); --info: var(--cyan-500); /* -- カレンダー (曜日のアクセント) -- */ --color-saturday: var(--cyan-500); --color-saturday-light: var(--cyan-300); --color-saturday-bg: var(--cyan-350); /* datepicker 等の薄い土曜背景 */ --color-sunday: var(--pink-500); --color-sunday-light: var(--pink-300); --color-sunday-bg: var(--red-150); /* datepicker 等の薄い日曜背景 */ --color-today-marker: var(--yellow-500); --color-danger: var(--red-400); /* -- リンク -- */ --link: var(--cyan-700); --link-hover: var(--cyan-750); /* ============================================================= * 3. 機能固定色 (テーマ非依存) * ファイル種別アイコンや3色スピナーなど、機能識別のための色。 * ダークテーマでも同じ色が使われる。 * ============================================================= */ /* -- ローダー3点スピナー (信号機モチーフ) -- */ --spinner-red: var(--red-550); --spinner-yellow: var(--orange-450); --spinner-green: var(--green-550); /* -- ファイル拡張子アイコン色 -- */ --file-pdf: var(--red-700); --file-mp4: var(--blue-800); --file-doc: var(--blue-850); --file-xls: var(--green-650); --file-ppt: var(--red-650); --file-zip: var(--purple-500); --file-jpg: var(--orange-550); /* -- 凡例用カラー -- */ --legend-1: var(--cyan-650); --legend-2: var(--util-999900); /* ============================================================= * 4. 後方互換変数 * 既存CSS/JSPで使われている旧名を維持。新規では使わない。 * ============================================================= */ /* 旧 color.css 由来 */ --main-color: var(--primary); --main-color-light: var(--primary-light); --main-color-medium: var(--primary-medium); --main-color-dark: var(--primary-dark); /* 旧コードで使われていたが未定義だった変数 */ --white: var(--gray-0); --gray: var(--gray-500); --gray-dark: var(--gray-800); --gray-dark-hover: var(--gray-700); --gray-thin: var(--gray-300); --gray-light: var(--gray-100); --pink: var(--pink-500); --light: var(--gray-50); --cyan: var(--cyan-500); --yellow: var(--yellow-500); /* ============================================================= * 5. 非色トークン * ============================================================= */ /* -- タイポグラフィ -- */ --font-family-base: 'Noto Sans JP', sans-serif; --font-family-zh: 'Microsoft Yahei', 'PingHei', sans-serif; --font-family-mono: IPAexGothic, monospace; --line-height-base: 35px; --line-height: 35px; /* 旧 base.css で使用 */ /* -- 角丸 -- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 10px; --radius-pill: 50px; /* -- 影 -- */ --shadow-sm: 1px 1px 5px rgba(0, 0, 0, .15); --shadow-md: 5px 5px 10px rgba(0, 0, 0, .25); --shadow-lg: 5px 5px 20px rgba(68, 68, 68, .5); /* -- z-index (重ね順を名前で管理) ------------------------------ * 旧コードで使われていた値: * 1, 2, 3, 4, 5, 9, 10, 11, 12, 99, 100, 200, 998, 999, * 1000, 1001, 1002, 1003, 1999, 3000, 9001, 9999 * を以下のレイヤーに集約。 * --------------------------------------------------------------- */ --z-below: 0; /* 後背 (背景下) */ --z-base: 1; /* 通常レイヤ */ --z-sidebar: 2; /* サイドバー */ --z-front: 3; /* 通常より前面 */ --z-raised: 4; /* もう少し前面 */ --z-card: 5; /* カード等 */ --z-dropdown: 9; /* ドロップダウン、フライアウト */ --z-header: 10; /* ヘッダー、固定iframe */ --z-header-front: 11; /* ヘッダー前面マスク */ --z-popup: 12; /* ポップアップヘッダ */ --z-toast: 99; /* トースト・通知バッジ */ --z-toast-strong: 100; /* 強調表示 */ --z-mask: 998; /* マスク (drop menu の下) */ --z-loading-mask: 999; /* ローディングマスク */ --z-modal: 1000; /* モーダル */ --z-modal-front: 1001; /* モーダル前面 */ --z-modal-stop: 1002; /* stop-mask */ --z-modal-msg: 1003; /* msg-box */ --z-loading: 1999; /* loading-mask */ --z-spinner: 3000; /* loading-spin */ --z-preview-bar: 9001; /* プレビューバー */ --z-overlay: 9999; /* 最前面 (mm-notify, fiscal-year) */ /* -- トランジション -- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 500ms ease; } /* ================================================================= * ダークテーマ * * 適用方法: HTMLタグに data-theme="dark" を付ける * * * もしくはJSで動的に切替: * document.documentElement.dataset.theme = 'dark'; * * 解除する場合は data-theme を外すか "default" に戻す。 * ================================================================= */ :root[data-theme="dark"] { /* --- primary --- */ --primary: #6BA8E5; --primary-light: #1f2937; --primary-medium: #374151; --primary-dark: #93C5FD; /* --- surface (背景) --- */ --surface: #111827; --surface-alt: #1f2937; --surface-sunken: #0b1220; /* --- サイドバー (ダーク時はより暗く) --- */ --sidebar-bg: #0b1220; --sidebar-text: #d1d5db; /* --- text (文字色) --- */ --text: #f3f4f6; --text-muted: #9ca3af; --text-subtle: #d1d5db; --text-on-primary: #ffffff; /* --- border --- */ --border: #374151; --border-strong: #4b5563; --border-subtle: #1f2937; /* --- ステータス色 (ダーク背景で視認できるよう明度を上げる) --- */ --danger: #FF6B6B; --danger-strong: #FF8A65; --danger-light: #4a1f24; --success: #4ADE80; --warning: #FFC857; --info: #5DADE2; /* --- カレンダー (土曜・日曜・今日マーカー) --- */ --color-saturday: #5DADE2; --color-saturday-light: #1e3a4a; --color-saturday-bg: #1e3a4a; --color-sunday: #F5A097; --color-sunday-light: #4a2520; --color-sunday-bg: #4a2520; /* --- リンク --- */ --link: #6BA8E5; --link-hover: #93C5FD; /* --- 後方互換用変数の上書き --- */ --main-color: var(--primary); --main-color-light: var(--primary-light); --main-color-medium: var(--primary-medium); --main-color-dark: var(--primary-dark); --white: #1f2937; /* ダーク時の「白」= 明るめのダーク面 */ --gray: #9ca3af; --gray-dark: #f3f4f6; /* ダーク時の「濃グレー」= 明るい文字 */ --gray-dark-hover: #d1d5db; --gray-thin: #374151; --gray-light: #1f2937; }