# 機能設計書 38-スタイル変数

## 概要

本ドキュメントは、Liam DBアプリケーションで使用されるCSS変数（デザイントークン）について記述する。本機能は、カラー、スペーシング、タイポグラフィ、z-index等の統一されたスタイル変数を提供し、UIの一貫性を維持する。

### 本機能の処理概要

**業務上の目的・背景**：大規模なWebアプリケーションでは、デザインの一貫性を保つためにデザイントークン（CSS変数）が不可欠である。本機能は、Figmaからの自動生成による変数と、手動定義の変数を組み合わせて、ダークモードに最適化されたデザインシステムを提供する。

**機能の利用シーン**：
- コンポーネントスタイリング時の色指定
- レイアウト構築時のスペーシング指定
- z-indexによるレイヤー管理

**主要な処理内容**：
1. カラー変数（400種類以上）：グレースケール、セマンティックカラー、オーバーレイ等
2. スペーシング変数（20種類）：4pxベースのスケール
3. z-index変数（11種類）：レイヤー管理
4. タイポグラフィ変数：フォントサイズ、フォントファミリー
5. シンタックスハイライトテーマ

**関連システム・外部連携**：
- Figma：デザイントークンの自動生成元
- Google Fonts：Inter、IBM Plex Mono
- destyle.css：CSSリセット

**権限による制御**：
該当なし。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 全画面 | 共通 | 利用画面 | 全コンポーネントでのスタイル適用 |

## 機能種別

デザインシステム基盤

## 入力仕様

### 入力パラメータ

CSS変数は直接参照され、パラメータ入力は不要。

### 入力データソース

- Figmaデザイントークン（自動生成）
- 手動定義のCSS変数

## 出力仕様

### 出力データ

- :root擬似クラスに定義されたCSS変数

### 出力先

- ブラウザのCSSカスケード

## 処理フロー

### 処理シーケンス

#### スタイル読み込みフロー

```
1. globals.css読み込み
   ├─ fonts.css（Google Fonts）
   ├─ destyle.css（CSSリセット）
   ├─ Dark/variables.css（ダークモードカラー）
   ├─ Mode 1/variables.css（フォントサイズ）
   ├─ variables.css（z-index、スクロールバー）
   ├─ icons/lucide.css
   └─ syntax-highlight.css
2. :rootに全変数が定義
3. コンポーネントからvar()で参照
```

### フローチャート

```mermaid
flowchart TD
    A[globals.css] --> B[fonts.css]
    A --> C[destyle.css]
    A --> D[Dark/variables.css]
    A --> E[Mode 1/variables.css]
    A --> F[variables.css]
    A --> G[syntax-highlight.css]
    D --> H[:rootに変数定義]
    E --> H
    F --> H
    H --> I[var関数で参照]
    I --> J[コンポーネントスタイル]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-38-01 | 自動生成ファイル | Dark/variables.cssとMode 1/variables.cssは編集禁止 | Figma同期 |
| BR-38-02 | スペーシング基準 | 4pxベースのスケール（--spacing-1 = 4px） | 全レイアウト |
| BR-38-03 | z-index階層 | 固定値で管理（toast: 3400が最上位）| レイヤー管理 |
| BR-38-04 | ダークモードデフォルト | --global-background: #141616 | 全画面 |
| BR-38-05 | カラー命名規則 | color-{色名}-{明度}形式 | カラーパレット |

### 変数カテゴリ

#### カラー変数（Dark/variables.css）

| カテゴリ | 変数例 | 用途 |
|---------|-------|------|
| グレースケール | --color-gray-0 ~ --color-gray-1000 | 背景、テキスト |
| グローバル | --global-background, --global-foreground | 基本色 |
| プライマリ | --primary-accent, --primary-hover | アクセントカラー |
| デンジャー | --danger-default, --danger-hover | エラー・警告 |
| ボタン | --button-primary-background, --button-border | ボタンスタイル |
| ノード | --node-border, --node-selected | ERDノード |
| トースト | --toast-success-background, --toast-error-foreground | 通知 |
| コラボレーター | --collaborator-color-1 ~ --collaborator-color-9 | マルチユーザー識別 |
| 差分 | --diff-new-foreground, --diff-deleted-background | 変更表示 |
| 重要度 | --severity-critical-100, --severity-warning-100 | ステータス表示 |

#### タイポグラフィ変数（Mode 1/variables.css）

| 変数 | 値 | 用途 |
|-----|-----|------|
| --font-size-1 | 10px | 最小テキスト |
| --font-size-5 | 14px | 本文 |
| --font-size-10 | 24px | 見出し |
| --main-font | Inter | 本文フォント |
| --code-font | IBM Plex Mono | コード |

#### z-index変数（variables.css）

| 変数 | 値 | 用途 |
|-----|-----|------|
| --z-index-toolbar-closed | 800 | ツールバー（閉） |
| --z-index-sidebar | 900 | サイドバー |
| --z-index-header | 1000 | ヘッダー |
| --z-index-dropdown-menu | 1100 | ドロップダウン |
| --z-index-popover | 1500 | ポップオーバー |
| --z-index-tooltip | 2000 | ツールチップ |
| --z-index-overlay | 3100 | オーバーレイ |
| --z-index-toast | 3400 | トースト |
| --z-index-cookie-consent | 4000 | Cookie同意 |

#### スペーシング変数（Dark/variables.css）

| 変数 | 値 |
|-----|-----|
| --spacing-0 | 0px |
| --spacing-1 | 4px |
| --spacing-2 | 8px |
| --spacing-4 | 16px |
| --spacing-8 | 32px |
| --spacing-16 | 64px |

## データベース操作仕様

本機能はCSSのため、直接的なデータベース操作は行わない。

## エラー処理

### エラーケース一覧

該当なし。CSS変数が未定義の場合はフォールバック値が適用される。

### リトライ仕様

該当なし。

## トランザクション仕様

該当なし。

## パフォーマンス要件

- Google Fontsはdisplay=swapで非同期読み込み
- CSS変数は初回パース時にのみ処理

## セキュリティ考慮事項

特になし。

## 備考

- Dark/variables.cssとMode 1/variables.cssは自動生成ファイル（編集禁止）
- カスタムスクロールバーはWebkit/標準両方に対応
- シンタックスハイライトテーマはsyntaxTheme.tsでJSオブジェクトとしてもエクスポート

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: グローバルスタイルの構成を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | globals.css | `frontend/packages/ui/src/styles/globals.css` | インポート順序、スクロールバースタイル |

**主要処理フロー**:
- **1-7行目**: CSSファイルのインポート順序
- **9-40行目**: グローバルスクロールバースタイル（@supports使用）

#### Step 2: カラー変数を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Dark/variables.css | `frontend/packages/ui/src/styles/Dark/variables.css` | ダークモードカラーパレット |

**主要処理フロー**:
- **1-4行目**: 自動生成ヘッダー（編集禁止）
- **6-20行目**: グレースケール（--color-gray-0 ~ --color-gray-1000）
- **151-172行目**: スペーシング（--spacing-0 ~ --spacing-275）
- **174-179行目**: グローバルカラー（--global-background等）
- **190-210行目**: プライマリカラー（--primary-accent等）
- **228-246行目**: ボタンカラー（--button-primary-background等）
- **319-326行目**: トーストカラー
- **327-337行目**: コラボレーターカラー（9色）
- **360-373行目**: 差分表示カラー
- **390-415行目**: 重要度カラー（severity）

#### Step 3: タイポグラフィを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | Mode 1/variables.css | `frontend/packages/ui/src/styles/Mode 1/variables.css` | フォントサイズ、フォントファミリー |
| 3-2 | fonts.css | `frontend/packages/ui/src/styles/fonts.css` | Google Fontsインポート |

**主要処理フロー（Mode 1/variables.css）**:
- **7-20行目**: フォントサイズ（--font-size-1 ~ --font-size-18）
- **28-31行目**: フォントファミリー（--main-font, --code-font）

**主要処理フロー（fonts.css）**:
- **3行目**: Google Fonts（Inter、IBM Plex Mono）のインポート

#### Step 4: z-indexとアニメーションを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | variables.css | `frontend/packages/ui/src/styles/variables.css` | z-index、タイミング関数 |

**主要処理フロー**:
- **2-4行目**: アニメーション変数（--default-timing-function等）
- **6-7行目**: コードフォント（フォールバック付き）
- **9-20行目**: z-index階層（800 ~ 4000）
- **22-29行目**: スクロールバー変数

#### Step 5: シンタックスハイライトを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 5-1 | syntaxTheme.ts | `frontend/packages/ui/src/styles/syntaxTheme.ts` | JSオブジェクト形式のテーマ |

**主要処理フロー**:
- **5-42行目**: syntaxTheme - 各構文要素のスタイル
- **44-52行目**: syntaxCustomStyle - preタグのスタイル
- **54-60行目**: syntaxCodeTagProps - codeタグのスタイル

### プログラム呼び出し階層図

```
globals.css
    ├─ fonts.css
    │      └─ Google Fonts（Inter、IBM Plex Mono）
    ├─ destyle.css（CSSリセット）
    ├─ Dark/variables.css
    │      └─ カラー、スペーシング、ボーダー半径
    │             ├─ --color-gray-*
    │             ├─ --global-*
    │             ├─ --primary-*
    │             ├─ --button-*
    │             ├─ --spacing-*
    │             └─ --border-radius-*
    ├─ Mode 1/variables.css
    │      └─ フォント関連
    │             ├─ --font-size-*
    │             └─ --main-font, --code-font
    ├─ variables.css
    │      └─ z-index、アニメーション、スクロールバー
    │             ├─ --z-index-*
    │             ├─ --default-timing-function
    │             └─ --scrollbar-*
    └─ syntax-highlight.css
           └─ シンタックスハイライト用CSS変数

syntaxTheme.ts（JS側エクスポート）
    ├─ syntaxTheme（構文要素スタイル）
    ├─ syntaxCustomStyle（preスタイル）
    └─ syntaxCodeTagProps（codeスタイル）
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| globals.css | `frontend/packages/ui/src/styles/globals.css` | スタイル | グローバルスタイルエントリポイント |
| Dark/variables.css | `frontend/packages/ui/src/styles/Dark/variables.css` | スタイル | ダークモードカラー（自動生成） |
| Mode 1/variables.css | `frontend/packages/ui/src/styles/Mode 1/variables.css` | スタイル | フォント変数（自動生成） |
| variables.css | `frontend/packages/ui/src/styles/variables.css` | スタイル | z-index、タイミング変数 |
| fonts.css | `frontend/packages/ui/src/styles/fonts.css` | スタイル | Google Fontsインポート |
| syntax-highlight.css | `frontend/packages/ui/src/styles/syntax-highlight.css` | スタイル | シンタックスハイライトCSS |
| syntaxTheme.ts | `frontend/packages/ui/src/styles/syntaxTheme.ts` | ソース | シンタックスハイライトJSテーマ |
| index.ts | `frontend/packages/ui/src/styles/index.ts` | ソース | スタイルエクスポート |
