基础

Colors 颜色

语义背景与文字色；底层走 --pvs-* 变量，类名只做快捷组合。

背景色

色块铺在浅灰托盘上，白底 / 浅底与页面底色可区分。

pvs-bg-primary

pvs-bg-success

pvs-bg-warning

pvs-bg-danger

pvs-bg-info

pvs-bg-body

pvs-bg-surface

pvs-bg-surface-muted

pvs-bg-success-muted

pvs-bg-warning-muted

pvs-bg-danger-muted

pvs-bg-info-muted

pvs-bg-transparent

卡片内 pvs-bg-surface-muted 浅底

<div class="pvs-card">
  <div class="pvs-card__body pvs-bg-surface-muted">
    <p class="pvs-m-0 pvs-text-sm">卡片内 <code>pvs-bg-surface-muted</code> 浅底</p>
  </div>
</div>

文字色

主色与次要字在浅底、主色底上的对比。

pvs-text-primary · 主色文字

pvs-text-muted · 次要说明

正文默认色（body）

主色底上的反白字（pvs-bg-primary 自带）

浅白次要字

pvs-text-primary

pvs-text-success

pvs-text-warning

pvs-text-danger

pvs-text-info

pvs-text-muted

<div class="pvs-stack pvs-gap-2">
  <p class="pvs-m-0 pvs-text-primary">pvs-text-primary</p>
  <p class="pvs-m-0 pvs-text-success">pvs-text-success</p>
  <p class="pvs-m-0 pvs-text-warning">pvs-text-warning</p>
  <p class="pvs-m-0 pvs-text-danger">pvs-text-danger</p>
  <p class="pvs-m-0 pvs-text-info">pvs-text-info</p>
  <p class="pvs-m-0 pvs-text-muted">pvs-text-muted</p>
</div>

灰阶色板

设计令牌 --pvs-gray-50 … 900；灰阶 utility 类故意不进核心（避免 CSS 膨胀），请用 var(--pvs-gray-*) 或语义 pvs-bg-surface-muted。裁决见 ITERATION.md I16。

--pvs-gray-50

--pvs-gray-100

--pvs-gray-200

--pvs-gray-300

--pvs-gray-400

--pvs-gray-500

--pvs-gray-600

--pvs-gray-700

--pvs-gray-800

--pvs-gray-900

类名速查

类	样式
`pvs-bg-body`	页面背景
`pvs-bg-surface`	卡片 / 面板底
`pvs-bg-surface-muted`	浅灰底
`pvs-bg-primary`	主色底（字反白）
`pvs-bg-success / warning / danger / info`	语义色底
`pvs-bg-*-muted`	语义浅底
`pvs-bg-transparent`	透明底
`pvs-text-primary`	主色文字
`pvs-text-success / warning / danger / info`	语义文字色
`pvs-text-muted`	次要文字

响应式

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

主色底 · md 起浅灰底

<div class="pvs-p-3 pvs-bg-primary md:pvs-bg-surface-muted pvs-border">
  <span class="pvs-text-sm">主色底 · md 起浅灰底</span>
</div>