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