基础

Design tokens 设计令牌

PivCSS 用 :root CSS 变量统一定义色、间距、圆角、字号；覆盖变量即可换肤，不必改组件 SCSS。

用法

在站点入口或主题层覆盖 --pvs-* 变量；暗黑模式见暗黑模式。

覆盖 --pvs-primary

其余令牌仍走默认尺度

<div class="pvs-p-4 pvs-border" style="--pvs-primary:#7c3aed">
  <p class="pvs-m-0 pvs-text-primary pvs-font-semibold">覆盖 --pvs-primary</p>
  <p class="pvs-m-0 pvs-mt-2 pvs-text-sm pvs-text-muted">其余令牌仍走默认尺度</p>
</div>

类名速查

类	样式
`--pvs-primary`	主色
`--pvs-body-bg` / `--pvs-body-color`	页面底 / 正文色
`--pvs-surface` / `--pvs-surface-muted`	卡片 / 浅底
`--pvs-border-color` / `--pvs-muted-color`	边框 / 次要文字
`--pvs-space-1` … `--pvs-space-24`	间距尺度
`--pvs-radius-sm/md/lg`	圆角（默认 0，扁平）
`--pvs-fs-sm` … `--pvs-fs-3xl`	字号尺度
`--pvs-tracking-tight` … `wide`	字间距令牌
`--pvs-shadow-sm/md`	阴影
`--pvs-z-sticky` … `--pvs-z-toast`	浮层叠层（dropdown/modal/toast 等）
`--pvs-transition-duration`	默认过渡时长

完整列表见 site-kit/pivcss/scss/tokens/_defaults.scss。

响应式

移动优先；在类名前加 sm: md: lg: xl:，仅在该断点及以上生效。详见响应式。

字号随 md 断点放大

<p class="pvs-m-0 pvs-text-sm md:pvs-text-lg pvs-font-medium">字号随 md 断点放大</p>