Variant / State
SpiraCSS では、従来の Modifier を Variant と State に分離します。
役割の整理
- 構造（Block / Element）: クラスで表現
- Variant（バリアント）: 見た目の静的な差分（サイズ/トーン/レイアウト）
- State（状態）: 動的に切り替わるもの（open/closed/loading/selected）
重要: JS で切り替えるかどうかは分類基準にしない（意味で決める）。
表現モード
設定は spiracss.config.js で行います。
data モード（デフォルト）
| 種別 | 用途 | HTML | SCSS |
|---|---|---|---|
| Variant | 見た目のバリエーション | data-variant="primary" | &[data-variant="primary"] |
| State | インタラクション状態 | data-state="active" | &[data-state="active"] |
| ARIA 状態 | アクセシビリティ状態 | aria-expanded="true" | &[aria-expanded="true"] |
配置ルール:
data-variant→ 基本構造セクションdata-state/aria-*→ —interaction セクション- 状態で見た目を変えたい場合は Variant ではなく State 側に書く
class モード
| 種別 | 命名ルール | 例 |
|---|---|---|
| Modifier | 先頭に -（ケバブケース 1〜2 語） | .-primary, .-active |
class モードでは Variant と State を区別できないため、SCSS 内のセクション配置は data モードと同じ基準で実装者が判断します。
データ属性の命名・値ルール
| 種別 | デフォルト属性名 | 値の形式 | 例 |
|---|---|---|---|
| Variant | data-variant | kebab 1〜2 語 | data-variant="primary-dark" |
| State | data-state | kebab 1〜2 語 | data-state="loading" |
Variant を複数の属性に分けることも可能（例: data-variant="primary" + data-size="large"）。