439 lines
31 KiB
JSON
439 lines
31 KiB
JSON
{
|
||
"schemaVersion": 2,
|
||
"generatedAt": "2026-08-20T22:28:26.8204862+03:30",
|
||
"title": "Design System: ZarinPal Merchant Analytics",
|
||
"extensions": {
|
||
"colorMeta": {
|
||
"action-blue": {
|
||
"role": "primary",
|
||
"displayName": "ZarinPal Action Blue",
|
||
"canonical": "#0A33FF",
|
||
"tonalRamp": [
|
||
"oklch(18% 0.12 265)",
|
||
"oklch(28% 0.18 265)",
|
||
"oklch(40% 0.23 265)",
|
||
"oklch(52% 0.27 265)",
|
||
"oklch(64% 0.22 265)",
|
||
"oklch(75% 0.16 265)",
|
||
"oklch(86% 0.09 265)",
|
||
"oklch(95% 0.035 265)"
|
||
]
|
||
},
|
||
"action-blue-night": {
|
||
"role": "primary",
|
||
"displayName": "Night Action Blue",
|
||
"canonical": "#6F8DFF",
|
||
"tonalRamp": [
|
||
"oklch(18% 0.08 265)",
|
||
"oklch(28% 0.12 265)",
|
||
"oklch(40% 0.16 265)",
|
||
"oklch(52% 0.18 265)",
|
||
"oklch(64% 0.17 265)",
|
||
"oklch(75% 0.14 265)",
|
||
"oklch(86% 0.08 265)",
|
||
"oklch(95% 0.03 265)"
|
||
]
|
||
},
|
||
"action-tint-light": {
|
||
"role": "neutral",
|
||
"displayName": "Light Action Tint",
|
||
"canonical": "#EEF1FF",
|
||
"tonalRamp": [
|
||
"oklch(18% 0.025 265)",
|
||
"oklch(30% 0.03 265)",
|
||
"oklch(42% 0.035 265)",
|
||
"oklch(55% 0.04 265)",
|
||
"oklch(68% 0.04 265)",
|
||
"oklch(79% 0.035 265)",
|
||
"oklch(89% 0.025 265)",
|
||
"oklch(96% 0.015 265)"
|
||
]
|
||
},
|
||
"action-tint-night": {
|
||
"role": "neutral",
|
||
"displayName": "Night Action Tint",
|
||
"canonical": "#202950",
|
||
"tonalRamp": [
|
||
"oklch(17% 0.04 265)",
|
||
"oklch(27% 0.055 265)",
|
||
"oklch(39% 0.065 265)",
|
||
"oklch(51% 0.07 265)",
|
||
"oklch(63% 0.065 265)",
|
||
"oklch(75% 0.05 265)",
|
||
"oklch(86% 0.03 265)",
|
||
"oklch(95% 0.015 265)"
|
||
]
|
||
},
|
||
"brand-yellow": {
|
||
"role": "secondary",
|
||
"displayName": "ZarinPal Yellow",
|
||
"canonical": "#FFD400",
|
||
"tonalRamp": [
|
||
"oklch(18% 0.05 95)",
|
||
"oklch(30% 0.08 95)",
|
||
"oklch(42% 0.11 95)",
|
||
"oklch(55% 0.14 95)",
|
||
"oklch(68% 0.16 95)",
|
||
"oklch(80% 0.17 95)",
|
||
"oklch(89% 0.12 95)",
|
||
"oklch(96% 0.05 95)"
|
||
]
|
||
},
|
||
"workspace-light": {
|
||
"role": "neutral",
|
||
"displayName": "Cool Workspace",
|
||
"canonical": "#F5F5F6",
|
||
"tonalRamp": ["#202023", "#3A3A3E", "#5A5A60", "#7C7C83", "#A0A0A6", "#C3C3C8", "#E2E2E5", "#F5F5F6"]
|
||
},
|
||
"surface-light": {
|
||
"role": "neutral",
|
||
"displayName": "White Surface",
|
||
"canonical": "#FFFFFF",
|
||
"tonalRamp": ["#262626", "#424242", "#626262", "#858585", "#AAAAAA", "#CECECE", "#EEEEEE", "#FFFFFF"]
|
||
},
|
||
"nested-light": {
|
||
"role": "neutral",
|
||
"displayName": "Nested Neutral",
|
||
"canonical": "#F3F4F6",
|
||
"tonalRamp": ["#202125", "#3A3B40", "#595B61", "#7B7D84", "#9FA1A8", "#C2C4CA", "#E0E2E6", "#F3F4F6"]
|
||
},
|
||
"ink-light": {
|
||
"role": "neutral",
|
||
"displayName": "Primary Ink",
|
||
"canonical": "#18181B",
|
||
"tonalRamp": ["#18181B", "#303034", "#4D4D52", "#6E6E74", "#929298", "#B8B8BD", "#DCDCE0", "#F5F5F6"]
|
||
},
|
||
"muted-ink-light": {
|
||
"role": "neutral",
|
||
"displayName": "Muted Ink",
|
||
"canonical": "#71717A",
|
||
"tonalRamp": ["#1D1D20", "#353539", "#505057", "#71717A", "#96969D", "#BABAC0", "#DEDEE2", "#F5F5F6"]
|
||
},
|
||
"border-light": {
|
||
"role": "neutral",
|
||
"displayName": "Cool Border",
|
||
"canonical": "#E4E4E7",
|
||
"tonalRamp": ["#222225", "#3D3D41", "#5D5D62", "#7F7F85", "#A2A2A8", "#C4C4C9", "#E4E4E7", "#F7F7F8"]
|
||
},
|
||
"workspace-night": {
|
||
"role": "neutral",
|
||
"displayName": "Night Workspace",
|
||
"canonical": "#101012",
|
||
"tonalRamp": ["#101012", "#28282B", "#444448", "#626267", "#838388", "#A7A7AC", "#CECED1", "#F2F2F3"]
|
||
},
|
||
"surface-night": {
|
||
"role": "neutral",
|
||
"displayName": "Night Surface",
|
||
"canonical": "#19191C",
|
||
"tonalRamp": ["#19191C", "#313135", "#4D4D52", "#6D6D72", "#909096", "#B5B5BA", "#DBDBDE", "#F5F5F6"]
|
||
},
|
||
"ink-night": {
|
||
"role": "neutral",
|
||
"displayName": "Night Ink",
|
||
"canonical": "#FAFAFA",
|
||
"tonalRamp": ["#252525", "#414141", "#606060", "#828282", "#A6A6A6", "#CACACA", "#E8E8E8", "#FAFAFA"]
|
||
},
|
||
"muted-ink-night": {
|
||
"role": "neutral",
|
||
"displayName": "Night Muted Ink",
|
||
"canonical": "#A1A1AA",
|
||
"tonalRamp": ["#202023", "#39393E", "#55555B", "#74747B", "#A1A1AA", "#BDBDC4", "#DCDCE0", "#F5F5F6"]
|
||
},
|
||
"border-night": {
|
||
"role": "neutral",
|
||
"displayName": "Night Border",
|
||
"canonical": "#3A3A3D",
|
||
"tonalRamp": ["#171719", "#28282B", "#3A3A3D", "#5C5C61", "#808086", "#A6A6AB", "#CDCDD1", "#F1F1F2"]
|
||
},
|
||
"success-light": {
|
||
"role": "tertiary",
|
||
"displayName": "Merchant Success",
|
||
"canonical": "#248061",
|
||
"tonalRamp": [
|
||
"oklch(18% 0.045 165)",
|
||
"oklch(28% 0.07 165)",
|
||
"oklch(40% 0.09 165)",
|
||
"oklch(52% 0.105 165)",
|
||
"oklch(64% 0.095 165)",
|
||
"oklch(76% 0.075 165)",
|
||
"oklch(87% 0.045 165)",
|
||
"oklch(95% 0.02 165)"
|
||
]
|
||
},
|
||
"warning-light": {
|
||
"role": "tertiary",
|
||
"displayName": "Merchant Warning",
|
||
"canonical": "#8A5300",
|
||
"tonalRamp": [
|
||
"oklch(18% 0.05 75)",
|
||
"oklch(28% 0.08 75)",
|
||
"oklch(40% 0.11 75)",
|
||
"oklch(52% 0.13 75)",
|
||
"oklch(64% 0.12 75)",
|
||
"oklch(76% 0.09 75)",
|
||
"oklch(87% 0.055 75)",
|
||
"oklch(95% 0.025 75)"
|
||
]
|
||
},
|
||
"danger-light": {
|
||
"role": "tertiary",
|
||
"displayName": "Merchant Danger",
|
||
"canonical": "#C93637",
|
||
"tonalRamp": [
|
||
"oklch(18% 0.065 25)",
|
||
"oklch(28% 0.105 25)",
|
||
"oklch(40% 0.15 25)",
|
||
"oklch(52% 0.18 25)",
|
||
"oklch(64% 0.16 25)",
|
||
"oklch(76% 0.11 25)",
|
||
"oklch(87% 0.06 25)",
|
||
"oklch(95% 0.025 25)"
|
||
]
|
||
},
|
||
"success-night": {
|
||
"role": "tertiary",
|
||
"displayName": "Night Success",
|
||
"canonical": "#6FD6AE",
|
||
"tonalRamp": [
|
||
"oklch(18% 0.035 165)",
|
||
"oklch(28% 0.055 165)",
|
||
"oklch(40% 0.075 165)",
|
||
"oklch(52% 0.09 165)",
|
||
"oklch(64% 0.09 165)",
|
||
"oklch(76% 0.075 165)",
|
||
"oklch(87% 0.045 165)",
|
||
"oklch(95% 0.018 165)"
|
||
]
|
||
},
|
||
"warning-night": {
|
||
"role": "tertiary",
|
||
"displayName": "Night Warning",
|
||
"canonical": "#F3BE5B",
|
||
"tonalRamp": [
|
||
"oklch(18% 0.045 80)",
|
||
"oklch(28% 0.07 80)",
|
||
"oklch(40% 0.10 80)",
|
||
"oklch(52% 0.13 80)",
|
||
"oklch(64% 0.14 80)",
|
||
"oklch(76% 0.12 80)",
|
||
"oklch(87% 0.07 80)",
|
||
"oklch(95% 0.025 80)"
|
||
]
|
||
},
|
||
"danger-night": {
|
||
"role": "tertiary",
|
||
"displayName": "Night Danger",
|
||
"canonical": "#FF8A8B",
|
||
"tonalRamp": [
|
||
"oklch(18% 0.055 25)",
|
||
"oklch(28% 0.09 25)",
|
||
"oklch(40% 0.13 25)",
|
||
"oklch(52% 0.16 25)",
|
||
"oklch(64% 0.15 25)",
|
||
"oklch(76% 0.11 25)",
|
||
"oklch(87% 0.06 25)",
|
||
"oklch(95% 0.022 25)"
|
||
]
|
||
}
|
||
},
|
||
"typographyMeta": {
|
||
"page-heading": {
|
||
"displayName": "Page Heading",
|
||
"purpose": "Routed page identity; rises from 20px to 24px at 640px."
|
||
},
|
||
"section-heading": {
|
||
"displayName": "Section Heading",
|
||
"purpose": "Major analytics modules and methodology groups."
|
||
},
|
||
"metric": { "displayName": "Metric", "purpose": "Tabular KPI values, amounts, counts, and rates." },
|
||
"body": { "displayName": "Body", "purpose": "Default Persian interface copy." },
|
||
"supporting": {
|
||
"displayName": "Supporting",
|
||
"purpose": "Descriptions, filters, tables, and insight summaries."
|
||
},
|
||
"label": {
|
||
"displayName": "Label",
|
||
"purpose": "Compact controls, metadata, badges, and chart annotations."
|
||
}
|
||
},
|
||
"shadows": [
|
||
{
|
||
"name": "surface-low",
|
||
"value": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
||
"purpose": "Subtle reinforcement on repeated cards, chart surfaces, and filter bars."
|
||
},
|
||
{
|
||
"name": "navbar-hairline",
|
||
"value": "0 1px 2px rgba(0,0,0,0.03)",
|
||
"purpose": "Fixed top-navbar separation only."
|
||
},
|
||
{
|
||
"name": "overlay-high",
|
||
"value": "0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)",
|
||
"purpose": "Tooltips, sheets, and modal-level floating content."
|
||
}
|
||
],
|
||
"motion": [
|
||
{ "name": "state-fast", "value": "160ms ease", "purpose": "Button tone and press feedback." },
|
||
{
|
||
"name": "shell-standard",
|
||
"value": "200ms ease-in-out",
|
||
"purpose": "Sidebar, sheet, and compact surface transitions."
|
||
},
|
||
{
|
||
"name": "chart-trace",
|
||
"value": "900ms cubic-bezier(0.22, 1, 0.36, 1)",
|
||
"purpose": "One-time payment-history line reveal; removed under reduced motion."
|
||
}
|
||
],
|
||
"breakpoints": [
|
||
{ "name": "kpi", "value": "600px" },
|
||
{ "name": "sm", "value": "640px" },
|
||
{ "name": "md", "value": "768px" },
|
||
{ "name": "lg", "value": "1024px" }
|
||
]
|
||
},
|
||
"components": [
|
||
{
|
||
"name": "Selected Range Button",
|
||
"kind": "button",
|
||
"refersTo": "button-primary",
|
||
"description": "Marks the active reporting period inside the compact segmented filter row.",
|
||
"html": "<button class=\"ds-range-selected\" aria-pressed=\"true\">ماهانه</button>",
|
||
"css": ".ds-range-selected { min-height:44px; padding:0 10px; border:1px solid transparent; border-radius:6px; background:var(--primary,#0a33ff); color:var(--primary-foreground,#fff); font:500 12px/1.5 IRANYekanX,Tahoma,sans-serif; cursor:pointer; transition:background-color 160ms ease,transform 160ms ease; } .ds-range-selected:hover { filter:brightness(.92); } .ds-range-selected:active { transform:translateY(1px); } .ds-range-selected:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:3px; } @media (min-width:640px) { .ds-range-selected { min-height:36px; } }"
|
||
},
|
||
{
|
||
"name": "Ghost Range Button",
|
||
"kind": "button",
|
||
"refersTo": "button-ghost",
|
||
"description": "Keeps inactive period choices legible but visually quiet.",
|
||
"html": "<button class=\"ds-range-ghost\" aria-pressed=\"false\">هفتگی</button>",
|
||
"css": ".ds-range-ghost { min-height:44px; padding:0 10px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--foreground,#18181b); font:500 12px/1.5 IRANYekanX,Tahoma,sans-serif; cursor:pointer; transition:background-color 160ms ease; } .ds-range-ghost:hover { background:var(--muted,#f3f4f6); } .ds-range-ghost:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:3px; } @media (min-width:640px) { .ds-range-ghost { min-height:36px; } }"
|
||
},
|
||
{
|
||
"name": "RTL Terminal Dropdown",
|
||
"kind": "input",
|
||
"refersTo": "input",
|
||
"description": "The custom RTL select primitive used for terminal scope and transaction status.",
|
||
"html": "<div class=\"ds-select\" dir=\"rtl\"><button class=\"ds-select-trigger\" aria-haspopup=\"listbox\" aria-expanded=\"true\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"M7 9h10\"/></svg><span>همه درگاهها</span><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m6 9 6 6 6-6\"/></svg></button><div class=\"ds-select-menu\" role=\"listbox\"><div class=\"ds-select-option\" role=\"option\" aria-selected=\"true\">همه درگاهها</div><div class=\"ds-select-option\" role=\"option\"><span>فروشگاه اصلی</span><small>۶۳۹ تراکنش</small></div></div></div>",
|
||
"css": ".ds-select { position:relative; width:220px; color:var(--foreground,#18181b); font-family:IRANYekanX,Tahoma,sans-serif; } .ds-select-trigger { display:flex; width:100%; min-height:44px; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--input,#e4e4e7); border-radius:6px; background:var(--background,#f5f5f6); color:inherit; font-size:12px; cursor:pointer; } .ds-select-trigger span { flex:1; overflow:hidden; text-align:right; text-overflow:ellipsis; white-space:nowrap; } .ds-select-trigger:hover { background:var(--muted,#f3f4f6); } .ds-select-trigger:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:2px; } .ds-select-menu { position:absolute; inset-inline-end:0; z-index:2; width:100%; margin-top:6px; padding:4px; border:1px solid var(--border,#e4e4e7); border-radius:8px; background:var(--popover,#fff); box-shadow:0 10px 15px -3px rgb(0 0 0 / .1); } .ds-select-option { display:flex; min-height:44px; align-items:center; justify-content:space-between; gap:16px; padding:8px; border-radius:6px; font-size:12px; cursor:pointer; } .ds-select-option:hover,.ds-select-option[aria-selected=true] { background:var(--accent,#eef1ff); color:var(--accent-foreground,#0a33ff); } .ds-select-option small { color:var(--muted-foreground,#71717a); font-size:11px; } @media (min-width:640px) { .ds-select-trigger { min-height:40px; } }"
|
||
},
|
||
{
|
||
"name": "Jalali Period Picker",
|
||
"kind": "custom",
|
||
"description": "Chooses an exact complete Jalali day, week, month, or season inside the full report-scope bar.",
|
||
"html": "<section class=\"ds-period\" dir=\"rtl\"><button class=\"ds-period-trigger\" aria-expanded=\"true\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\"/><path d=\"M16 3v4M8 3v4M3 11h18\"/></svg>خرداد ۱۴۰۵</button><div class=\"ds-period-panel\"><strong>انتخاب بازه دقیق</strong><small>فقط بازههایی که داده کامل دارند قابل انتخاباند.</small><div class=\"ds-period-head\"><input value=\"۱۴۰۵\" aria-label=\"سال گزارش\"><button>خرداد</button></div><div class=\"ds-period-weekdays\"><span>ش</span><span>ی</span><span>د</span><span>س</span><span>چ</span><span>پ</span><span>ج</span></div><div class=\"ds-period-grid\"><button>۱</button><button>۲</button><button>۳</button><button class=\"ds-period-selected\">۴</button><button>۵</button><button>۶</button><button>۷</button></div></div></section>",
|
||
"css": ".ds-period { position:relative; color:var(--foreground,#18181b); font-family:IRANYekanX,Tahoma,sans-serif; } .ds-period-trigger { display:inline-flex; min-height:44px; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--input,#e4e4e7); border-radius:6px; background:var(--background,#f5f5f6); color:inherit; font-size:12px; font-weight:500; cursor:pointer; } .ds-period-trigger svg { color:var(--primary,#0a33ff); } .ds-period-trigger:hover { background:var(--muted,#f3f4f6); } .ds-period-trigger:focus-visible,.ds-period-panel button:focus-visible,.ds-period-panel input:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:2px; } .ds-period-panel { width:min(384px,calc(100vw - 32px)); margin-top:6px; padding:16px; border:1px solid var(--border,#e4e4e7); border-radius:8px; background:var(--popover,#fff); box-shadow:0 10px 15px -3px rgb(0 0 0 / .1); } .ds-period-panel>small { display:block; margin-top:4px; color:var(--muted-foreground,#71717a); font-size:12px; } .ds-period-head { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; } .ds-period-head input,.ds-period-head button { min-height:44px; padding:0 12px; border:1px solid var(--input,#e4e4e7); border-radius:6px; background:var(--background,#f5f5f6); color:inherit; font:400 14px IRANYekanX,Tahoma,sans-serif; } .ds-period-weekdays,.ds-period-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:12px; text-align:center; } .ds-period-weekdays { color:var(--muted-foreground,#71717a); font-size:11px; } .ds-period-grid button { aspect-ratio:1; min-height:40px; border:0; border-radius:6px; background:transparent; color:inherit; cursor:pointer; } .ds-period-grid button:hover { background:color-mix(in srgb,var(--primary,#0a33ff) 10%,transparent); } .ds-period-grid .ds-period-selected { background:var(--primary,#0a33ff); color:var(--primary-foreground,#fff); } @media (min-width:640px) { .ds-period-trigger,.ds-period-head input,.ds-period-head button { min-height:36px; } }"
|
||
},
|
||
{
|
||
"name": "RTL Amount Range",
|
||
"kind": "input",
|
||
"description": "A two-thumb Rial range filter with explicit values and apply/reset actions.",
|
||
"html": "<section class=\"ds-amount\" dir=\"rtl\"><strong>بازه مبلغ تراکنش</strong><p>دو نشانگر را برای تعیین کمینه و بیشینه جابهجا کنید.</p><div class=\"ds-amount-values\"><output>از ۱۰۰٬۰۰۰ ریال</output><output>تا ۱۰٬۰۰۰٬۰۰۰٬۰۰۰ ریال</output></div><div class=\"ds-amount-track\"><span></span><i class=\"ds-amount-thumb ds-amount-min\" tabindex=\"0\"></i><i class=\"ds-amount-thumb ds-amount-max\" tabindex=\"0\"></i></div><div class=\"ds-amount-actions\"><button>اعمال بازه</button><button>پاککردن</button></div></section>",
|
||
"css": ".ds-amount { width:min(352px,calc(100vw - 32px)); padding:16px; border:1px solid var(--border,#e4e4e7); border-radius:8px; background:var(--popover,#fff); color:var(--foreground,#18181b); font-family:IRANYekanX,Tahoma,sans-serif; } .ds-amount p { margin:4px 0 16px; color:var(--muted-foreground,#71717a); font-size:12px; } .ds-amount-values { display:flex; justify-content:space-between; gap:12px; font-size:12px; font-variant-numeric:tabular-nums; } .ds-amount-values output { padding:4px 8px; border-radius:6px; background:var(--muted,#f3f4f6); } .ds-amount-track { position:relative; height:44px; } .ds-amount-track span { position:absolute; inset:20px 0 auto; height:4px; border-radius:999px; background:linear-gradient(to left,var(--muted,#f3f4f6) 0 10%,var(--primary,#0a33ff) 10% 82%,var(--muted,#f3f4f6) 82% 100%); } .ds-amount-thumb { position:absolute; top:12px; width:20px; height:20px; border:3px solid var(--background,#f5f5f6); border-radius:50%; background:var(--primary,#0a33ff); box-shadow:0 0 0 1px color-mix(in srgb,var(--primary,#0a33ff) 45%,transparent); cursor:grab; } .ds-amount-min { right:8%; } .ds-amount-max { left:16%; } .ds-amount-thumb:focus-visible { outline:3px solid color-mix(in srgb,var(--primary,#0a33ff) 28%,transparent); outline-offset:2px; } .ds-amount-actions { display:flex; gap:8px; } .ds-amount-actions button { min-height:44px; padding:0 12px; border:1px solid var(--input,#e4e4e7); border-radius:6px; background:transparent; color:inherit; font:600 14px IRANYekanX,Tahoma,sans-serif; cursor:pointer; } .ds-amount-actions button:first-child { flex:1; border-color:transparent; background:var(--primary,#0a33ff); color:var(--primary-foreground,#fff); } .ds-amount-actions button:hover { filter:brightness(.95); } .ds-amount-actions button:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:2px; }"
|
||
},
|
||
{
|
||
"name": "KPI Card",
|
||
"kind": "card",
|
||
"refersTo": "card",
|
||
"description": "The main scan unit for amount, count, rate, or completion metrics.",
|
||
"html": "<article class=\"ds-kpi\" dir=\"rtl\"><div class=\"ds-kpi-top\"><span>مبلغ پرداخت موفق</span><span class=\"ds-kpi-icon\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\"/><path d=\"M7 12h.01M17 12h.01\"/></svg></span></div><strong class=\"ds-kpi-value\">۲۱٬۳۴۷٬۷۱۳٬۹۱۰ ریال</strong><p>مجموع مبلغ پرداختهای موفق در این بازه</p></article>",
|
||
"css": ".ds-kpi { padding:16px; border:1px solid var(--border,#e4e4e7); border-radius:8px; background:var(--card,#fff); color:var(--card-foreground,#18181b); font-family:IRANYekanX,Tahoma,sans-serif; box-shadow:0 1px 2px rgb(0 0 0 / .05); transition:transform 200ms ease; } .ds-kpi:hover { transform:translateY(-2px); } .ds-kpi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; color:var(--muted-foreground,#71717a); font-size:14px; } .ds-kpi-icon { color:var(--primary,#0a33ff); } .ds-kpi-value { display:block; font-size:24px; line-height:1.25; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.025em; } .ds-kpi p { margin:6px 0 0; color:var(--muted-foreground,#71717a); font-size:12px; line-height:1.66; } .ds-kpi:focus-within { outline:3px solid var(--ring,#0a33ff); outline-offset:3px; } @media (min-width:640px) { .ds-kpi { padding:20px; } .ds-kpi-top { margin-bottom:20px; } .ds-kpi p { margin-top:8px; line-height:2; } }"
|
||
},
|
||
{
|
||
"name": "Active Navigation Item",
|
||
"kind": "nav",
|
||
"refersTo": "nav-active",
|
||
"description": "Communicates the current routed merchant task in the physical-right sidebar.",
|
||
"html": "<a class=\"ds-nav-active\" href=\"#\" aria-current=\"page\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"/></svg><span>پیشخوان</span></a>",
|
||
"css": ".ds-nav-active { display:flex; align-items:center; justify-content:flex-start; gap:8px; height:44px; padding:8px 12px; border-radius:6px; background:var(--sidebar-accent,#eef1ff); color:var(--sidebar-accent-foreground,#0a33ff); font:500 13px/1.5 IRANYekanX,Tahoma,sans-serif; text-decoration:none; direction:rtl; transition:filter 160ms ease; } .ds-nav-active:hover { filter:brightness(.97); } .ds-nav-active:focus-visible { outline:3px solid var(--sidebar-ring,#0a33ff); outline-offset:2px; }"
|
||
},
|
||
{
|
||
"name": "Ready Status Badge",
|
||
"kind": "chip",
|
||
"description": "Pairs compact semantic color with explicit readiness language.",
|
||
"html": "<span class=\"ds-status-ready\">✓ آماده</span>",
|
||
"css": ".ds-status-ready { display:inline-flex; align-items:center; justify-content:center; min-height:20px; padding:2px 12px; border-radius:9999px; background:color-mix(in srgb,var(--success,#248061) 10%,transparent); color:var(--success,#248061); font:600 12px/1.5 IRANYekanX,Tahoma,sans-serif; white-space:nowrap; } .ds-status-ready:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:3px; }"
|
||
},
|
||
{
|
||
"name": "Fee Share Donut",
|
||
"kind": "custom",
|
||
"description": "Shows the effective fee share beside a plain-language definition and exact percentage.",
|
||
"html": "<article class=\"ds-fee\" dir=\"rtl\"><div class=\"ds-fee-donut\" role=\"img\" aria-label=\"سهم کارمزد ۲٫۴ درصد\"><svg viewBox=\"0 0 42 42\" aria-hidden=\"true\"><circle class=\"ds-fee-track\" cx=\"21\" cy=\"21\" r=\"15.9\"/><circle class=\"ds-fee-value\" cx=\"21\" cy=\"21\" r=\"15.9\" pathLength=\"100\"/></svg><strong>۲٫۴٪</strong></div><div><h3>سهم کارمزد از پرداخت موفق</h3><p>بخش آبی، سهم واقعی کارمزد را از کل مبلغ موفق این بازه نشان میدهد.</p></div></article>",
|
||
"css": ".ds-fee { display:flex; align-items:center; gap:16px; padding:16px; border:1px solid var(--border,#e4e4e7); border-radius:8px; background:var(--card,#fff); color:var(--card-foreground,#18181b); font-family:IRANYekanX,Tahoma,sans-serif; box-shadow:0 1px 2px rgb(0 0 0 / .05); } .ds-fee-donut { position:relative; display:grid; width:96px; height:96px; flex:none; place-items:center; } .ds-fee-donut svg { width:100%; height:100%; transform:rotate(-90deg); } .ds-fee-track,.ds-fee-value { fill:none; stroke-width:4; } .ds-fee-track { stroke:var(--muted,#f3f4f6); } .ds-fee-value { stroke:var(--primary,#0a33ff); stroke-linecap:round; stroke-dasharray:2.4 97.6; transition:stroke-dasharray 700ms ease; } .ds-fee-donut strong { position:absolute; font-size:14px; font-variant-numeric:tabular-nums; } .ds-fee h3 { margin:0; font-size:14px; font-weight:600; } .ds-fee p { margin:8px 0 0; color:var(--muted-foreground,#71717a); font-size:12px; line-height:2; } .ds-fee:focus-within { outline:3px solid var(--ring,#0a33ff); outline-offset:3px; } @media (min-width:640px) { .ds-fee { padding:20px; } } @media (prefers-reduced-motion:reduce) { .ds-fee-value { transition:none; } }"
|
||
},
|
||
{
|
||
"name": "Transaction Row",
|
||
"kind": "custom",
|
||
"description": "A dense merchant-owned record with a semantic detail link and explicit status tone.",
|
||
"html": "<table class=\"ds-table\" dir=\"rtl\"><thead><tr><th>شناسه پرداخت</th><th>مبلغ</th><th>وضعیت</th></tr></thead><tbody><tr><td dir=\"ltr\"><a href=\"#\">SES-639-042</a></td><td>۱٬۲۵۰٬۰۰۰ ریال</td><td><span class=\"ds-verified\">تأییدشده</span></td></tr></tbody></table>",
|
||
"css": ".ds-table { width:100%; border-collapse:collapse; border:1px solid var(--border,#e4e4e7); border-radius:8px; overflow:hidden; background:var(--card,#fff); color:var(--card-foreground,#18181b); font:400 14px/1.75 IRANYekanX,Tahoma,sans-serif; } .ds-table th,.ds-table td { padding:12px; text-align:right; border-bottom:1px solid var(--border,#e4e4e7); } .ds-table th { background:var(--muted,#f3f4f6); color:var(--muted-foreground,#71717a); font-size:12px; font-weight:600; } .ds-table tbody tr { transition:background-color 160ms ease; } .ds-table tbody tr:hover { background:color-mix(in srgb,var(--muted,#f3f4f6) 60%,transparent); } .ds-table td[dir=ltr] { text-align:left; font:500 12px/1.5 ui-monospace,monospace; } .ds-table a { border-radius:4px; color:inherit; text-decoration:none; } .ds-table a:hover { color:var(--primary,#0a33ff); text-decoration:underline; text-underline-offset:4px; } .ds-table a:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:2px; } .ds-verified { display:inline-flex; min-height:20px; align-items:center; padding:2px 8px; border:1px solid #a7f3d0; border-radius:6px; background:#ecfdf5; color:#047857; font-size:12px; }"
|
||
}
|
||
],
|
||
"narrative": {
|
||
"northStar": "The Calm Merchant Control Room",
|
||
"overview": "This is a Persian-first merchant workspace built for repeated operational scanning. It feels calm rather than promotional: compact controls, exact figures, plain-language explanations, and crisp bordered surfaces let a merchant understand recent performance before drilling into transactions, payment attempts, fees, or peer context.\n\nThe world is recognizably ZarinPal through its wordmark, action blue, small yellow brand accent, right-to-left shell, and familiar right-side navigation. Density is deliberate but never cramped. The first viewport establishes scope in the fixed top bar and physical-right sidebar, then leads with a page heading, period control, KPI row, and payment-history chart. Motion is limited to state feedback, shell transitions, and the initial chart trace.",
|
||
"keyCharacteristics": [
|
||
"Persian-first RTL structure with Iran Yekan X FaNum and tabular merchant-facing numerals.",
|
||
"Fixed 56px top bar, physical-right desktop sidebar, and mobile terminal selector in the navbar.",
|
||
"Low-radius white or near-black financial surfaces separated primarily by 1px borders.",
|
||
"ZarinPal blue reserved for actions, selection, navigation, chart emphasis, and focus.",
|
||
"Semantic success, warning, and danger color always accompanied by words, icons, or both.",
|
||
"Encouraging, factual summaries that move from recent performance to inspectable evidence."
|
||
],
|
||
"rules": [
|
||
{
|
||
"name": "The One Blue Voice Rule",
|
||
"body": "Blue signals an action, current scope, active navigation, focus, or the primary data series; it does not wash large passive regions.",
|
||
"section": "colors"
|
||
},
|
||
{
|
||
"name": "The Meaning Needs Language Rule",
|
||
"body": "Success, warning, and danger color reinforce a visible label, icon, or explanation and never carry status alone.",
|
||
"section": "colors"
|
||
},
|
||
{
|
||
"name": "The Persian Measure Rule",
|
||
"body": "Merchant-facing amounts, counts, percentages, dates, and chart values use Persian digits; technical identifiers remain canonical Latin inside isolated left-to-right spans.",
|
||
"section": "typography"
|
||
},
|
||
{
|
||
"name": "The Weight Before Scale Rule",
|
||
"body": "The dense workspace creates hierarchy first with 500, 700, and 800 weights, then with a compact 12/14/15/20/24px size ladder.",
|
||
"section": "typography"
|
||
},
|
||
{
|
||
"name": "The Scope Before Evidence Rule",
|
||
"body": "Terminal and period scope must be visible before KPIs, charts, tables, or attempt history; desktop terminal scope belongs in the right sidebar and narrow-screen terminal scope belongs in the navbar.",
|
||
"section": "layout"
|
||
},
|
||
{
|
||
"name": "The Border Carries Structure Rule",
|
||
"body": "Use the 1px border and tonal layers for resting structure; reserve conspicuous shadows for content that actually floats above the shell.",
|
||
"section": "elevation"
|
||
},
|
||
{
|
||
"name": "The Data Surface Radius Rule",
|
||
"body": "Repeated financial surfaces use 8px corners and a visible border; rounding must not make tables, KPIs, or filters feel like marketing cards.",
|
||
"section": "shapes"
|
||
}
|
||
],
|
||
"dos": [
|
||
"Do keep the terminal selector in the physical-right desktop sidebar and in the narrow-screen navbar.",
|
||
"Do lead with the selected period, four ordered KPIs, a plain-language takeaway, and then inspectable chart or table evidence.",
|
||
"Do use action blue for the current scope, primary series, focus, and actionable controls.",
|
||
"Do keep cards at 8px with a 1px border and use 16px KPI padding on phones, increasing to 20px from 640px.",
|
||
"Do preserve Persian digits, Rial units, Jalali dates, RTL flow, and left-to-right isolation for technical identifiers.",
|
||
"Do provide text, icons, focus states, and accessible alternatives anywhere color or a chart carries meaning."
|
||
],
|
||
"donts": [
|
||
"Don't turn yellow into a broad dashboard fill or use it for body text on light surfaces.",
|
||
"Don't use pill geometry for cards, tables, inputs, or ordinary navigation rows.",
|
||
"Don't add decorative gradients, oversized hero type, or marketing-page whitespace to authenticated analytics routes.",
|
||
"Don't use shadow as the primary boundary between resting financial surfaces.",
|
||
"Don't animate the page as a spectacle; keep motion to state feedback, the shell, overlays, and the chart trace, and honor reduced motion.",
|
||
"Don't hide status, scope, units, formulas, or important chart values behind color or pointer-only interaction."
|
||
]
|
||
}
|
||
}
|