デザイントークン
すべてのデザイントークンは --stella-* CSS カスタムプロパティプレフィックスを使用します。ソースは packages/theme/src/tokens.json です。
トークンの使いかた
テーマ CSS をインポートした後、任意のスタイルシートでトークンを参照できます:
.my-button {
background: var(--stella-color-cosmos-500);
color: var(--stella-color-starlight-primary);
border-radius: var(--stella-borderRadius-md);
padding: var(--stella-spacing-3) var(--stella-spacing-6);
font-size: var(--stella-typography-fontSize-sm);
transition: background var(--stella-transition-fast);
}カラーパレット
天体をテーマに命名されています。各パレットは知覚的な明度スケールで 11 段階（50〜950）があります。
Cosmos
プライマリ / インタラクティブ — インディゴ
--stella-color-cosmos-[50–950]
Nebula
アクセント — パープル
--stella-color-nebula-[50–950]
Aurora
アクセント — シアン
--stella-color-aurora-[50–950]
Nova
サクセス / ポジティブ — エメラルド
--stella-color-nova-[50–950]
Void — 背景色
階層的なダークサーフェス用の意味的な背景トークン。
Starlight — テキスト色
アクセシブルなタイプ階層のための意味的なテキストカラートークン。
Aa
primary
--stella-color-starlight-primary
Aa
secondary
--stella-color-starlight-secondary
Aa
disabled
--stella-color-starlight-disabled
その他のトークン
タイポグラフィ
--stella-typography-*
フォントファミリー、サイズ、ウェイト、行高
スペーシング
--stella-spacing-*
0 〜 96 のスケール（0.25rem 単位）
角丸
--stella-borderRadius-*
none / sm / md / lg / xl / full
シャドウ
--stella-shadow-*
sm / md / lg / xl / glow
トランジション
--stella-transition-*
fast / base / slow