設計原則

Chlorophyllは以下の原則に基づいて設計されています。

アクセシビリティファースト

すべてのコンポーネントはWCAGガイドラインに準拠し、キーボード操作、スクリーンリーダー対応、適切なARIA属性を標準で提供します。

一貫性のあるデザイン

デザイントークンシステムを採用し、色、タイポグラフィ、スペーシングなどを一元管理することで、アプリケーション全体で統一されたデザインを実現します。

柔軟なカスタマイズ

Compound Componentパターンを採用し、コンポーネントの構造を自由に組み替えることができます。また、Panda CSSのレシピシステムにより、バリアントの追加や上書きが容易です。

ヘッドレスUIの採用

ChlorophyllはArk UIをベースとしたヘッドレスUIライブラリです。これにより、複雑な状態管理やアクセシビリティの実装を内部で処理しながら、スタイルの完全なカスタマイズを可能にしています。

┌───────────────────────────────────┐
│           Chlorophyll             │
│  ┌─────────────────────────────┐  │
│  │       Design Tokens         │  │
│  │     (Panda CSS Presets)     │  │
│  └─────────────────────────────┘  │
│  ┌─────────────────────────────┐  │
│  │           Ark UI            │  │
│  │     (Headless Components)   │  │
│  └─────────────────────────────┘  │
└───────────────────────────────────┘

トークンベースのスタイリング

3層構造のトークンシステムを採用しています。

レイヤー	説明	例
Reference Token	生の値を定義	`green.500: #10b981`
System Token	意味的な名前を付与	`bg.subtle: {colors.green.100}`
Component Token	コンポーネント固有のトークン	`button.bg: {colors.bg.subtle}`

この構造により、テーマの切り替えやカスタマイズが容易になります。

Design Principles