カラー
まずセマンティックエイリアスを使用してください — コンポーネントは色相を直接指定するのではなく、これらを使用する必要があります（理由は 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ベースのスケールです — これが、すべての値にリテラルな !important を持つ従来の $spacing-1..9 トークンを置き換える理由については、tokens.css 自体のコメントを参照してください。
アイコン
ナビゲーションのラインアイコンセット（src/icons/nav-icons.tsx） — 約25個のアイコンのために lucide-react を依存関係として追加する代わりに、Lucide のパスデータをプレーンな SVG としてコピーしたものです。従来のナビゲーションと 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
リンク
インラインテキストリンク — テキストのように見えるボタン形状のコントロールである Button 自体の variant="link" とは異なります。src/prism/primitives/Link.tsx を参照してください。
underline="hover" (default)
バッジ
all variants
カード
デフォルト
padding="md"（デフォルト）、ホバー時の動作なし。
インタラクティブ
interactive — ホバー時に浮き上がり、影が付きます。試してみてください。
アバター
サイズ、および登録された写真がない場合の代替表示