توکن‌های طراحی

// پس‌زمینه
<div className="bg-surface-100">...</div>

// متن
<p className="text-foreground">...</p>
<p className="text-light">...</p>

// حاشیه
<div className="border border-default">...</div>

// برند
<button className="bg-brand text-contrast">...</button>

// در className — با hsl() wrapper
<div className="bg-[hsl(var(--background-surface-100))]">...</div>

// با opacity
<div className="bg-[hsl(var(--brand-default)/0.1)]">...</div>

// در inline style
<div style={{ color: `hsl(var(--foreground-default))` }}>...</div>

import { useChartTheme } from '@parto-system-design/ui'

function MyChart() {
  const { chartColors, getColor } = useChartTheme()

  // رنگ‌های نمودار آماده
  const color1 = chartColors[0]

  // خواندن هر CSS variable
  const brandColor = getColor('--brand-default', 'hsl(153 55% 42%)')
}

<div className="bg-surface-100 border border-default rounded-lg p-6">
  <h2 className="text-foreground font-semibold">عنوان</h2>
  <p className="text-light mt-1">توضیحات</p>

  <div className="bg-surface-200 border border-muted rounded-md p-4 mt-4">
    <span className="text-lighter">محتوای تو در تو</span>
  </div>
</div>

<div className="flex gap-2">
  <Badge style={{ backgroundColor: 'hsl(var(--sentiment-positive))' }}>مثبت</Badge>
  <Badge style={{ backgroundColor: 'hsl(var(--sentiment-negative))' }}>منفی</Badge>
  <Badge style={{ backgroundColor: 'hsl(var(--sentiment-neutral))' }}>خنثی</Badge>
</div>