チューン (Tune)
3 つ目のスタイル軸。テーマが配色を、チューンが形・余白・書体・サイズを決めます。data-tune 属性 1 つで 11 プリセット、他のすべてと直交します。
直交する 3 つの軸
pinion-ui は UI の見た目を独立した 3 層に分けます。どのテーマ × どのチューン × どのコンポーネント variant でも自由に組み合わせられます。
- Theme — 配色。パレット（39 × ライト / ダーク）を <html> の data-theme で指定。
- Tune — 形・余白・書体・サイズ。全体の「間（ま）」を <html> の data-tune で指定。
- Component — 要素ごとの variant / サイズ / 色。Blade の props（color・size・appearance）で指定。
チューンの指定
<html>（または任意の祖先要素）の属性 1 つが、配下のすべての pinion-ui コンポーネントに CSS カスタムプロパティ経由でカスケードします。コンポーネントごとの設定もリビルドも不要です。
<html data-theme="pinion" data-tune="editorial">
右上のテーマ / チューン切替でも data-tune がライブに変わり、このページの各サンプルも反応します。内側の任意の要素に data-tune を付ければ、その一部だけ上書きできます。
11 のプリセット
各プリセットは「形 × 余白 × 書体」空間の、一貫した排他的な 1 点です。下では同じカードのマークアップを各チューンで描画しています。違うのは祖先の data-tune だけです。
default
バランスの取れた中立な基準
Aa — Heading
The quick brown fox jumps over the lazy dog.
minimal
余白を詰めた、控えめで静かな調子
Aa — Heading
The quick brown fox jumps over the lazy dog.
sharp
角丸ゼロ、シャープな直角
Aa — Heading
The quick brown fox jumps over the lazy dog.
corporate
保守的でゆったり、信頼感
Aa — Heading
The quick brown fox jumps over the lazy dog.
tech
等幅の見出し、密で技術的
Aa — Heading
The quick brown fox jumps over the lazy dog.
brutal
硬い角・太い枠線・力強い
Aa — Heading
The quick brown fox jumps over the lazy dog.
editorial
セリフ見出し、ゆとりある読みのリズム
Aa — Heading
The quick brown fox jumps over the lazy dog.
luxury
広々と洗練、高コントラストな書体
Aa — Heading
The quick brown fox jumps over the lazy dog.
soft
丸くやさしく親しみやすい
Aa — Heading
The quick brown fox jumps over the lazy dog.
pixel
ピクセルフォント、レトロゲーム調
Aa — Heading
The quick brown fox jumps over the lazy dog.
draft
手描き風、ゆらぎのあるスケッチ調
Aa — Heading
The quick brown fox jumps over the lazy dog.
強度 (Strength) — 効き具合を調整
data-tune-strength でチューンが基準からどれだけ離れるかを段階指定します: xs / sm / md（既定）/ lg / xl。下は同じ soft チューンを 5 段階の強度で表示したものです。
xs
Aa — Heading
The quick brown fox jumps over the lazy dog.
sm
Aa — Heading
The quick brown fox jumps over the lazy dog.
md
既定 Aa — Heading
The quick brown fox jumps over the lazy dog.
lg
Aa — Heading
The quick brown fox jumps over the lazy dog.
xl
Aa — Heading
The quick brown fox jumps over the lazy dog.
<html data-theme="pinion" data-tune="soft" data-tune-strength="xl">
仕組み
すべてのトークンは「base + チューン別 delta × 強度」で決まります。コンポーネントは var(--token) を読むだけで、どのチューンが有効かを知りません。4 つのトークン群が連動します:
- 形 — 角丸（--radius-box / --radius-field）と枠線の太さ。
- 余白 — T シャツサイズ（--spacing-3xs … --spacing-7xl）が p-md / gap-lg / py-4xl を駆動。
- 書体 — 見出し・本文のフォント、字間、行間、タイプスケール比。
- サイズと奥行き — 各種の高さと、多層のボックス / フィールド影。
すべて CSS カスタムプロパティなので、チューン変更はリビルド不要で即座にカスケードします。上のサンプルのような入れ子の上書きも含みます。
テーマ × チューンは自由に混ぜられる
2 つの軸は決して混ざりません。39 テーマ × 11 チューン = 同じコンポーネントから 429 通りの見た目。あとで pinion-ui を離れる場合も、php artisan ui:eject が選んだテーマ × チューンを素の Tailwind に凍結します（ロックインなし）。 導入方法 →