Overview
Chlorophyllのデザイントークン
Chlorophyllは、すべてのコンポーネントに一貫したスタイリングを提供するトークンベースのデザインシステムを使用しています。
トークンの種類
System Tokens
System Tokensは、用途に基づいてReference Tokensにマッピングされるセマンティックなトークンです：
- Colors - セマンティックカラートークン（bg、fg、surfaceなど）
- Borders - ボーダースタイルの定義
- Typography - テキストスタイルの組み合わせ
- Z-Index - スタッキング順序の値
- Shadows - ボックスシャドウの定義
- Radii - セマンティックな角丸
- Spacing - マージンとパディングの値
- Animations - アニメーションキーフレームの定義
Reference Tokens
Reference Tokensは、デザインシステムを定義する基本的な値です。以下が含まれます：
- Colors - 12段階のベースカラーパレット
- Radii - 角丸の値
- Font Weights - フォントの太さ
- Line Heights - 行の高さ
- Letter Spacings - 文字間隔
- Opacity - 透明度
- Durations - アニメーションの持続時間
- Easings - アニメーションのイージング関数
- Aspect Ratios - アスペクト比
- Border Widths - ボーダーの太さ