調音 (Tune)
第三條樣式軸。主題控制配色，調音控制形狀、間距、字體與尺寸——一個 data-tune 屬性、11 套預設，與其他一切正交。
三條正交的軸
pinion-ui 把介面的外觀拆成三個彼此獨立的層。任意主題 × 任意調音 × 任意元件變體都可自由組合。
- Theme — 配色。用 <html> 的 data-theme 指定調色盤（39 × 亮/暗）。
- Tune — 形狀、間距、字體、尺寸。用 <html> 的 data-tune 指定整體氣質。
- Component — 單個元素的變體 / 尺寸 / 顏色。用 Blade 的 props（color、size、appearance）指定。
設定調音
<html>（或任意祖先元素）上的一個屬性，會透過 CSS 自訂屬性向下層所有 pinion-ui 元件層疊。無需逐元件設定，也無需重新建置。
<html data-theme="pinion" data-tune="editorial">
右上角的主題 / 調音切換器會即時改變 data-tune，本頁每個範例也隨之反應。你也可以在任意內層元素上設定 data-tune，只覆蓋那一部分。
11 套預設
每套預設都是「形狀 × 間距 × 字體」空間中一個連貫且互斥的點。下方用同一段卡片標記在每套調音下算繪，唯一不同的只是祖先的 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 調音在五種強度下的表現。
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">
底層原理
每個 token 都是「base + 各調音 delta × 強度」。元件只讀取 var(--token)，並不知道目前是哪套調音。四組 token 連動:
- 形狀 — 圓角（--radius-box / --radius-field）與描邊寬度。
- 間距 — T 恤尺碼刻度（--spacing-3xs … --spacing-7xl）驅動 p-md / gap-lg / py-4xl。
- 字體 — 標題與內文字體、字距、行高、字級比例。
- 尺寸與層次 — 各類高度，以及多層的盒/欄位陰影。
因為全部是 CSS 自訂屬性，切換調音無需重新建置、即時層疊——也包括上方範例中的巢狀覆蓋。
主題 × 調音自由組合
兩條軸永不混淆: 39 套主題 × 11 套調音 = 同一批元件呈現 429 種外觀。日後要離開 pinion-ui？php artisan ui:eject 會把你選定的主題 × 調音凍結成原生 Tailwind——毫無鎖定。 安裝方法 →