チューン (Tune)
3 つ目のスタイル軸。テーマが配色を、チューンが形・余白・書体・サイズを決めます。data-tune 属性 1 つで 13 プリセット、他のすべてと直交します。
直交する 3 つの軸
pinion-ui は UI の見た目を独立した 3 層に分けます。どのテーマ × どのチューン × どのコンポーネント variant でも自由に組み合わせられます。
- Theme — 配色。パレット（55 × ライト / ダーク）を <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 を付ければ、その一部だけ上書きできます。
13 のプリセット
各プリセットは「形 × 余白 × 書体」空間の、一貫した排他的な 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.
plush
粘土のようにふっくら、大きな角丸とやわらかい影
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.
proto
ドットマトリクスの見出し、カプセル形のタイル、四角いセレクター
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">
レスポンシブなルート文字
v0.18.0 から使えるオプション。<html> に data-text-scale="a" か "b" を付けると、狭い画面でルートの font-size が段階的に下がります。rem で書かれた値（文字・t-shirt 余白・フィールドの高さ）がまとめて縮むので、要素ごとに縮め方がずれません。属性を付けなければ何も変わりません。
<html data-theme="pinion" data-tune="default" data-text-scale="b">
| 値 | ≤768px | ≤425px | ≤375px | ≤320px |
|---|---|---|---|---|
a |
−0.8px · 15.2 | −1.2px · 14.8 | −1.6px · 14.4 | −2.0px · 14.0 |
b |
−1.0px · 15.0 | −1.0px · 15.0 | −2.0px · 14.0 | −3.0px · 13.0 |
a は細かい刻み、b は大きめの刻み。どちらもチューン自身の --font-size-base から --pn-text-trim を引く仕組みなので、minimal や pixel とも組み合わさり、読み手のブラウザの文字サイズ設定も尊重します。
確かめるにはウィンドウ幅を 768px 未満に縮めてください。刻みはルート要素のメディアクエリで効くため、枠の中ではプレビューできません。
仕組み
すべてのトークンは「base + チューン別 delta × 強度」で決まります。コンポーネントは var(--token) を読むだけで、どのチューンが有効かを知りません。4 つのトークン群が連動します:
- 形 — 角丸（--radius-box / --radius-field）と枠線の太さ。
- 余白 — T シャツサイズ（--spacing-3xs … --spacing-7xl）が p-md / gap-lg / py-4xl を駆動。
- 書体 — 見出し・本文のフォント、字間、行間、タイプスケール比。
- サイズと奥行き — 各種の高さと、多層のボックス / フィールド影。
すべて CSS カスタムプロパティなので、チューン変更はリビルド不要で即座にカスケードします。上のサンプルのような入れ子の上書きも含みます。
テーマ × チューンは自由に混ぜられる
2 つの軸は決して混ざりません。55 テーマ × 13 チューン = 同じコンポーネントから 715 通りの見た目。あとで pinion-ui を離れる場合も、php artisan ui:eject が選んだテーマ × チューンを素の Tailwind に凍結します（ロックインなし）。 導入方法 →