调音 (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——毫无锁定。 安装方法 →