颜色
优先使用语义别名——组件应使用这些别名,而不是直接使用色调(原因请参见 src/prism/tokens.css 自身的注释)。下面的品牌色调和中性色阶为这些别名提供支持。
语义化
Primary
--prism-color-primary
Primary hover
--prism-color-primary-hover
Accent
--prism-color-accent
Accent hover
--prism-color-accent-hover
Success
--prism-color-success
Warning
--prism-color-warning
Danger
--prism-color-danger
Info
--prism-color-info
品牌色调
Purple
--prism-color-purple
Blue
--prism-color-blue
Pink
--prism-color-pink
Yellow
--prism-color-yellow
Green
--prism-color-green
灰度色阶
50
--prism-color-gray-50
100
--prism-color-gray-100
200
--prism-color-gray-200
300
--prism-color-gray-300
400
--prism-color-gray-400
500
--prism-color-gray-500
600
--prism-color-gray-600
700
--prism-color-gray-700
800
--prism-color-gray-800
900
--prism-color-gray-900
排版
Heading — h1 / display
Heading — h2 / xl
Heading — h3 / lg
Heading — h4 / md
Heading — h5 / sm
Heading — h6 / xs
Text size="lg" — for lead paragraphs.
Text size="base" — the default body copy size.
Text size="sm" color="muted" — captions, metadata.
Text weight="semibold"
间距
一个简单的 4px 基础比例尺——它为什么取代了旧版 $spacing-1..9 令牌(每个值都带有字面量 !important),请参见 tokens.css 自身的注释。
图标
导航的线性图标集(src/icons/nav-icons.tsx)——来自 Lucide 的路径数据,以纯 SVG 形式复制,而非为约 25 个图标添加 lucide-react 依赖。它在旧版导航和 Prism 自身的 Header/Footer 之间共享,因此位于 src/prism/ 之外;在此重新导出,以便仍属于 Prism 的公共接口的一部分。
newspaper
calendar
graduationCap
flaskConical
messageSquareText
headphones
users
messageCircle
folderKanban
briefcase
route
info
heart
handshake
gift
shoppingBag
circleHelp
search
rocket
settings
shield
lightbulb
circleCheck
triangleAlert
链接
Inline 文本链接——与 Button 自身的 variant="link" 不同,后者是一个外观像文本的按钮形态控件。请参见 src/prism/primitives/Link.tsx。
underline="hover" (default)
徽章
all variants
卡片
默认
padding="md"(默认),无悬停效果。
交互式
interactive——悬停时会上浮并产生阴影。试试看。
头像
尺寸,以及没有照片时的替代显示