# コンポーネント仕様（フォーム系 UI）

[`design-tokens.md`](/design-tokens.md) のトークンを参照してボタン・チェックボックスを定義する。
この仕様だけで実装・再現できることを目的とする。実際のレンダリング例は
[`components.html`](/components.html) を参照。

---

## Button

### 共通スタイル

| プロパティ | 値（トークン） |
| --- | --- |
| display | `inline-flex`（`align-items: center; justify-content: center`） |
| font-family | `typography.fontFamily.base` |
| font-weight | `typography.fontWeight.medium`（500） |
| border-radius | `radius.md`（6px） |
| border | `1px solid transparent`（secondary のみ枠線あり） |
| cursor | `pointer` |
| transition | `background-color 0.15s ease, opacity 0.15s ease` |

### サイズ

| サイズ | padding（上下 / 左右） | font-size |
| --- | --- | --- |
| `sm` | `spacing.2` / `spacing.3`（8px / 12px） | `typography.fontSize.sm`（14px） |
| `md` | `spacing.2` / `spacing.4`（8px / 16px） | `typography.fontSize.base`（16px） |
| `lg` | `spacing.3` / `spacing.5`（12px / 20px） | `typography.fontSize.lg`（18px） |

### バリアント

| バリアント | 背景 | テキスト | 枠線 | hover |
| --- | --- | --- | --- | --- |
| `primary` | `color.brand.primary` | `color.text.onBrand` | なし | 背景を `color.brand.primaryHover` |
| `secondary` | `color.surface.raised` | `color.text.default` | `1px solid color.surface.border` | 背景を `color.neutral.100` |
| `danger` | `color.semantic.danger` | `color.text.onBrand` | なし | 背景を `color.semantic.dangerHover` |
| `ghost` | `transparent` | `color.brand.primary` | なし | 背景を `color.neutral.100` |

### 状態

| 状態 | スタイル |
| --- | --- |
| `disabled` | `opacity: 0.5; cursor: not-allowed`（hover の背景変化は無効） |
| `active`（押下） | primary は `color.brand.primaryActive` |

### 実装例（HTML + CSS）

```html
<button class="btn btn--primary btn--md">保存する</button>
```

```css
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.btn--md { padding: 8px 16px; font-size: 16px; }
.btn--primary { background: #2563eb; color: #ffffff; }
.btn--primary:hover { background: #1d4ed8; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
```

---

## Checkbox

### 仕様

| プロパティ | 値（トークン） |
| --- | --- |
| サイズ | `18px × 18px` |
| border | `2px solid color.surface.border`（未チェック時） |
| border-radius | `radius.sm`（4px） |
| 背景（未チェック） | `color.surface.background` |
| 背景（チェック） | `color.brand.primary` |
| チェックマーク | `color.text.onBrand`（白）のレ点 |
| ラベル間隔 | チェックボックスとラベルの間に `spacing.2`（8px） |
| ラベル font-size | `typography.fontSize.base`（16px） |

### 状態

| 状態 | スタイル |
| --- | --- |
| `checked` | 背景 `color.brand.primary`、枠線も同色、白いレ点を表示 |
| `disabled` | `opacity: 0.5; cursor: not-allowed` |
| `focus` | `color.brand.primary` の 2px アウトライン（`outline-offset: 2px`） |

### 実装例（HTML + CSS）

```html
<label class="checkbox">
  <input type="checkbox" checked>
  <span>利用規約に同意する</span>
</label>
```

```css
.checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.checkbox input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
}
.checkbox input[type="checkbox"]:checked {
  background: #2563eb;
  border-color: #2563eb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.5 4.5l-7 7-3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
```

---

## AI での再現手順（想定）

1. [`design-tokens.md`](/design-tokens.md) または [`design-tokens.json`](/design-tokens.json) を取得してトークン値を把握する
2. 本ファイルのコンポーネント表を読み、各バリアント・サイズ・状態にトークンを割り当てる
3. HTML + CSS（または任意のフレームワーク）として出力する
4. [`components.html`](/components.html) と見比べて再現度を確認する