/* ============================================================================ * FVJAPAN CRM — デザイントークン（素の CSS 版） * * 出典は web/app/globals.css（Tailwind v4 版の実体）。**値は1つも変えていない。** * 定義と根拠は docs/DESIGN.md §5 / §6。値を変えるときは DESIGN.md も同じ変更で直すこと * （ドリフト防止・DESIGN.md §3 ガバナンス）。コントラスト比の注記はすべて globals.css の実測値の写し。 * * **生の色値（#hex / rgb / hsl / oklch）を書いてよいのは、このファイルだけ。** * base.css / layout.css / components.css は var(--...) でのみ参照する。 * * 構成（globals.css の節と対応させてある）: * §A トークン（@theme の中身を :root へ） * §B 密度・行間・シェルの寸法（globals.css §B と同じ） * §C shadcn/ui 互換の別名のうち、components.css が参照するものだけ * §E Tailwind のユーティリティが暗黙に持っていた既定値（globals.css には無い。下に理由） * * **globals.css の §A にあった「既定パレットを消す」（--color-*: initial）は移していない。** * 素の CSS にはユーティリティの生成が無いので、消す対象がそもそも存在しない。 * ========================================================================== */ /* ========================================================================== * §A トークン * ========================================================================== */ :root { /* スペーシングは基準値方式（globals.css §A の --spacing: 4px）。 部品 CSS では calc(var(--spacing) * N) で参照する。N は Tailwind の p-N と同じ数。 使ってよい N は docs/DESIGN.md §5-D: 画面を組む余白 … 1 / 2 / 3 / 4 / 6 / 8 / 12 / 16 / 24 / 32 コントロールの寸法に限る端数 … 0.5 / 1.5 / 2.5 / 3.5 / 5 / 7 / 9 */ --spacing: 4px; /* 常に必要な特殊値 */ --color-transparent: transparent; --color-current: currentColor; --color-white: #ffffff; /* ---- グレー9段（色相215°・彩度あり。真のグレーは使わない） ---- */ --color-gray-50: #f9fafb; /* 白比 1.05 ページ背景・テーブルヘッダー */ --color-gray-100: #f0f2f5; /* 白比 1.12 行ホバー・無効な面 */ --color-gray-200: #e4e7ec; /* 白比 1.24 罫線・区切り線 */ --color-gray-300: #d3d8de; /* 白比 1.43 入力欄の枠線 */ --color-gray-400: #9ea7b3; /* 白比 2.43 本文・プレースホルダ不可（2.43 は §10 の 4.5 を割る。移行計画 D21） */ --color-gray-500: #778292; /* 白比 3.89 アイコン・装飾（本文テキスト不可） */ --color-gray-600: #596473; /* 白比 6.01 補助テキストの既定 */ --color-gray-700: #3c4553; /* 白比 9.69 見出し以外の本文 */ --color-gray-900: #1d232b; /* 白比15.82 本文・見出しの既定 */ /* ---- プライマリ（teal・色相175°）---- */ --color-teal-50: #effaf9; --color-teal-100: #d9f2f0; --color-teal-200: #aee0dc; --color-teal-400: #2baba1; /* 白文字 2.82 ✕ 文字不可 */ --color-teal-600: #0e958a; /* 白文字 3.69 ✕ 文字不可 / ○ 非テキスト3:1 */ --color-teal-700: #097169; /* 白文字 5.87 ○ AA */ --color-teal-900: #07403c; /* 白文字11.62 ○ AAA */ /* ---- セマンティック（fg は白背景・-bg 上どちらでも AA）---- */ --color-danger-fg: #b41d1d; --color-danger-bg: #fef1f1; --color-danger-border: #f4c2c2; --color-warning-fg: #985910; --color-warning-bg: #fef8f1; --color-warning-border: #f4ddc2; --color-success-fg: #16794b; --color-success-bg: #f1fef8; --color-success-border: #c2f4dd; --color-info-fg: #1657c0; --color-info-bg: #f1f6fe; --color-info-border: #c2d5f4; --color-ai-fg: #5d20c5; --color-ai-bg: #f6f1fe; --color-ai-border: #d5c2f4; /* ---- 商材色10種（docs/DESIGN.md §5-B2。全ペア実測済み・すべて AA 合格）---- */ --color-product-elec-fg: #92400e; --color-product-elec-bg: #fef3c7; /* 6.37 */ --color-product-gas-fg: #9a3412; --color-product-gas-bg: #ffedd5; /* 6.38 */ --color-product-mobile-fg: #166534; --color-product-mobile-bg: #dcfce7; /* 6.49 */ --color-product-net-fg: #1e40af; --color-product-net-bg: #dbeafe; /* 7.15 */ --color-product-wifi-fg: #075985; --color-product-wifi-bg: #e0f2fe; /* 6.59 */ --color-product-ws-fg: #155e75; --color-product-ws-bg: #cffafe; /* 6.49 */ --color-product-check-fg: #57534e; --color-product-check-bg: #f5f5f4; /* 6.99 */ --color-product-ins-fg: #6b21a8; --color-product-ins-bg: #f3e8ff; /* 7.39 */ --color-product-tv-fg: #9f1239; --color-product-tv-bg: #ffe4e6; /* 6.68 */ --color-product-estate-fg: #3730a3; --color-product-estate-bg: #e0e7ff; /* 8.06 */ /* ---- 申込ステータスの段（§5-B2）。段階を読み分けるため段ごとに色を維持する ---- キー・ラベルは api/domain/contracts/status.py の EntryStatus / LABELS、 語の並びは legacy_status.all_labels()（GET /api/crm/entry-statuses/ が配る並び）に一致させる。 **数詞を書かない** —— 2026-09-01 に 6→7、2026-09-17 に 7→8（W-7 でキャンセルが2段になった）と 二度動いており、数を書くと次に増えた日に古い数だけが残る。 */ --color-entry-applied-fg: #1d4ed8; --color-entry-applied-bg: #eff6ff; /* 6.16 */ --color-entry-callfail-fg: #b91c1c; --color-entry-callfail-bg: #fef2f2; /* 5.91 */ --color-entry-calldone-fg: #0e7490; --color-entry-calldone-bg: #ecfeff; /* 5.15 */ --color-entry-entered-fg: #15803d; --color-entry-entered-bg: #f0fdf4; /* 4.79 */ /* 工事日確定。既存6色に無い色相（琥珀）。緑（エントリー完了）と teal（開通）に挟まれる段 */ --color-entry-workdate-fg: #92400e; --color-entry-workdate-bg: #fef3c7; /* 6.37 */ --color-entry-opened-fg: #0b7268; --color-entry-opened-bg: #e6f4f2; /* 5.13 */ /* キャンセル申請中（代理店の記録）。2026-09-17 追加（W-7 / 判断モック D17）。 確定（CXL）は無彩色のグレーなので、**まだ人の手が要る申請中は有彩色**にして読み分ける。 確認電話落ちの赤（#b91c1c・色相 0°）とは色相が 336° で離れている。商材タグの「映像」と 近い色相だが列が異なる（商材列とステータス列。工事日確定＝電気と同じ先例・§5-B2）。 */ --color-entry-cxlreq-fg: #9d174d; --color-entry-cxlreq-bg: #fdf2f8; /* 7.22 */ /* CXL はモックの #6B7280/#F3F4F6 が 4.39 で AA 未達だったため是正 */ --color-entry-cxl-fg: #596473; --color-entry-cxl-bg: #f0f2f5; /* 5.36 */ /* ---- 顧客状態（導出の5値・白背景上のテキスト色・§5-B2）---- 鍵の持ち主は domain/listing/customer_conditions.py の STATUS_KEYS（2026-10-05 に保存値をやめて導出にした）。 数値は白との比。 */ --color-cstatus-active: #0b7268; /* 契約中 5.80 */ /* 申込中（2026-10-05 新設。モックに先例が無い）。fuchsia（色相 295°）—— 商談中の青（221°）・ 申込ステータス「申し込み中」の青（224°）からそれぞれ 70° 以上離す。AI の紫（262°）とも 33° 離れる */ --color-cstatus-applying: #a21caf; /* 申込中 6.32 */ --color-cstatus-negotiating: #2563eb; /* 商談中 5.17 */ --color-cstatus-prospect: #a16207; /* 見込み 4.92 */ /* 解約はモックの #9CA3AF が 2.54 で AA 未達だったため gray-600 に是正 */ --color-cstatus-cancelled: #596473; /* 解約 ＋取り消し線 6.01 */ /* ---- 役割トークン（画面側はこちらを参照する）---- */ --color-bg: var(--color-gray-50); --color-surface: #ffffff; --color-border-input: var(--color-gray-300); --color-text: var(--color-gray-900); --color-text-muted: var(--color-gray-600); --color-text-disabled: var(--color-gray-400); /* プレースホルダの文字色。**--color-text-muted 以上**（移行計画 D21。DESIGN §5-A の gray-400 割り当ては 白地 2.43:1 で §10 の AA 4.5:1 に反するので §10 を優先した。§5-A の文面の直しは文書担当）。 gray-600 は白地 6.01:1（上の表）／フリーワード欄の実測 5.75:1（a11y 監査） */ --color-text-placeholder: var(--color-text-muted); --color-primary-hover: var(--color-teal-900); --color-primary-soft: var(--color-teal-50); --color-focus: var(--color-teal-700); /* 非テキスト専用（アイコン・ステッパー・罫線アクセント）。白文字を載せない。 shadcn の --accent（ホバー面）と衝突するため名前を分けている。 */ --color-accent-nontext: var(--color-teal-600); /* モーダル（`c-dialog`）の幕（`::backdrop`）。**新しい色を作らない** —— 本文の gray-900 を透かして作る （DESIGN.md §5-B4・2026-10-01。見本 mockups.html の 0.45 に合わせた）。幕の下の文字は読ませないので コントラストの実測は要らない（背景は `inert`）。モーダル以外に使わない */ --color-scrim: color-mix(in oklab, var(--color-gray-900) 45%, transparent); /* ---- タイポグラフィ ---- */ --font-ui: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic", "Noto Sans JP", sans-serif; --font-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-2xs: 10px; /* バッジ・商材タグ */ --text-xs: 11px; /* 表の注釈 */ --text-sm: 12px; /* テーブルセル・フォームラベル */ --text-base: 13px; /* 本文の既定 */ --text-md: 14px; /* カード見出し */ --text-lg: 16px; /* 画面タイトル */ --text-xl: 20px; /* KPI 数値 */ /* ---- 角丸3段（§5-D）---- globals.css にある shadcn 由来の別名（xl / 2xl / 3xl / 4xl）は移していない。 「存在しないクラスは無言で角丸ゼロ」の事故は Tailwind のクラス生成に固有で、 素の CSS では部品側が3段を直接参照するため。Badge が使っていた 4xl は sm（4px）に読み替えた。 */ --radius-sm: 4px; /* バッジ・チップ */ --radius-md: 6px; /* ボタン・入力欄 */ --radius-lg: 10px; /* カード・モーダル */ /* ---- 影5段（elevation）---- */ --shadow-none: none; --shadow-1: 0 1px 2px rgb(29 35 43 / 0.06); --shadow-2: 0 2px 6px rgb(29 35 43 / 0.08); --shadow-3: 0 6px 16px rgb(29 35 43 / 0.1); --shadow-4: 0 16px 40px rgb(29 35 43 / 0.16); } /* ========================================================================== * §B 密度・行間（docs/DESIGN.md §6） * ========================================================================== */ :root { /* アプリシェルの寸法（docs/DESIGN.md §6）。スケール外。出典はモック v0.5.1 の実測値。 */ --sidebar-w: 216px; --topbar-h: 52px; --popover-w: 320px; /* トップバーの通知・ヘルプ */ --row-h-compact: 32px; --row-h-standard: 40px; --control-h-compact: 32px; --control-h-standard: 36px; --leading-body: 1.6; --leading-cell: 1.4; --leading-head: 1.3; /* 字間（Tailwind `tracking-wider`）。区分名などの小さな大文字寄りの見出しに使う */ --tracking-wide: 0.05em; /* 中身の最大幅（`max-w-md` / `max-w-6xl` は Tailwind の値そのもの）。**画面の骨格には使わない** （骨格は最小想定幅 1280px・§6。ここはフォーム・エラーの枠・見本ページの幅）。 `@media` の閾値（40rem / 48rem / 80rem）は CSS の仕様上 `var()` を使えないので layout.css に直値で残す */ --width-form: 28rem; /* max-w-md … ログインの枠・フォームの見本 */ --width-prose: 40rem; /* シェル無しのエラー画面の枠（Tailwind の段には無い値。第2段の土台で決めた） */ --width-showcase: 72rem; /* max-w-6xl … /design の見本ページ */ /* モーダル（`c-dialog`）の幅の上限（560px。design-briefs/00_共通_モーダル.md §2「min(560px, 100% - 32px)」）。 48rem 未満では使わず、画面下からの全幅のシートになる（DESIGN.md §6 の表・2026-10-01） */ --width-dialog: 35rem; /* 表の折り返すセルの 48rem 未満での最小幅。**文字数で持つ**（em ＝ 全角1字ぶん）。48rem 以上では使わない（U-1 第2弾）。 `--width-cell-wrap` は全ての表の `.c-table__td--wrap` に効く（10字あれば1字ずつ縦に折れない）。 `--width-cell-wrap-wide` は特に長い文が入る列（`.c-table__td--wrap-wide`。更新記録の「変わった項目」・ ログイン記録の「理由」）に効く。値は更新記録の 390px の実測で、行の高さが通常の行に近づく幅として選んだ */ --width-cell-wrap: 10em; --width-cell-wrap-wide: 20em; /* 顧客DB一覧の先頭列「顧客ID / FV番号」（2026-10-08・Issue #424 PR③a。design-brief 顧客DB一覧_顧客IDとFV番号 D-FV7）。 `--width-fv-label` は FV番号の括弧の語の最大幅。**文字数で持つ**（em ＝ 全角1字ぶん。4字 ＝「申込不明」がちょうど入る）。 `--width-fv-column` は先頭列の**優先の幅**（見出しの `width`。auto の表は伸びしろを列の間で按分するので、 持たせないと余りのあるページでも括弧が折れる）。値は種データの番号10字（等幅 `--text-2xs` で 60px）＋括弧2字（20px）＋ 語4字（40px）＋セルの横の余白（compact の左右 8px × 2）＝ 136px の実測。番号と括弧が長ければ列は中身で広がる （1本1行。括弧は縮めない ＝ `screens/customers.css` の `.s-customers-fv__item`・2026-10-09。~~不足は代理店の列の省略で受ける~~ 2026-10-14 からは列を縮めず、表が枠の中で横に送られる） */ --width-fv-label: 4em; --width-fv-column: 8.5rem; /* 顧客DB一覧の並べ替えできる見出しの語の最小幅（`.s-customers-th-label`）。**2字ぶん＋WCAG 1.4.12 の文字間隔の余り**。 見出しを折り返す列（月額合計・最終接触）が「月/額/合/計」と1字ずつ縦に折れないための下限（#538。2026-10-11）。 表が枠より広いとき（列を縮めず枠の中で横に送る ＝ 2026-10-14）、自動の表組みは列を中身の最小幅まで詰めるので、この下限が効く */ --width-th-label-min: 2.5em; /* 項目名と値（`.c-kv`）の項目名の 48rem 未満での幅。**文字数で持つ**（em ＝ 全角1字ぶん。8字を超える項目名は折り返す）。 48rem 以上は 96px / 128px のまま（U-1 第2弾） */ --width-kv-label-narrow: 8em; /* 表の中に置いた選択欄の 48rem 未満での最小幅。**文字数で持つ**（em ＝ 全角1字ぶん）。 取込定義の版の「取り込む先」は「顧客／メールアドレス」の形で、60px では「顧客」までしか読めなかったため（U-1 第3弾・UX Med）。 48rem 以上では使わない（表の列幅は従来どおり） */ --width-select-narrow: 12em; } /* ========================================================================== * §C shadcn/ui 互換の別名（components.css が参照する分だけ） * * globals.css §C のうち、Button / Input の移植で実際に参照している名前だけを残した。 * --card / --popover / --chart-* / --sidebar-* は部品 CSS から参照していないので移していない。 * ========================================================================== */ :root { --background: var(--color-bg); --foreground: var(--color-text); /* 主ボタン。白文字とのコントラスト 5.87:1（AA 合格） */ --primary: var(--color-teal-700); --primary-foreground: var(--color-white); --secondary: var(--color-gray-100); --secondary-foreground: var(--color-gray-900); --muted: var(--color-gray-100); --muted-foreground: var(--color-gray-600); --destructive: var(--color-danger-fg); --border: var(--color-gray-200); --input: var(--color-gray-300); --ring: var(--color-focus); } /* ========================================================================== * §E Tailwind のユーティリティが暗黙に持っていた既定値 * * **globals.css には無い。** Tailwind 版では `border`（=1px）・`ring-2`（=2px）・ * `transition-colors`（=150ms / cubic-bezier(0.4,0,0.2,1)）のようにクラス名の中に * 値が隠れていた。素の CSS では部品側に数値を書くしかなくなるので、 * 部品 CSS に px を直書きしないためにここへ名前を付けて集めた。 * **新しいデザイン値ではない**（描画結果は Tailwind 版と同じ）。 * ========================================================================== */ :root { --border-w: 1px; /* Tailwind `border` / `border-t` 等の既定幅 */ --ring-w: 2px; /* Tailwind `ring-2` */ --focus-outline-w: 2px; /* globals.css §D の :focus-visible { outline: 2px solid } */ --focus-outline-offset: 1px; /* 同 outline-offset: 1px */ --press-offset: 1px; /* Tailwind `translate-y-px`（ボタン押下時の沈み） */ --stripe-w: 2px; /* globals.css §D .stripe-cxl の縞の幅 */ --duration-colors: 150ms; /* Tailwind `transition-colors` の既定 */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* 同 */ }