Hardik
2de883c70f
Captures the live PPMS visual language (tokens from globals.css + components/ui/* + lib/utils.ts) so new screens can be prototyped with the same look and feel. - Wireframe/design-system.html: single-page living style guide (color ramps, typography, radius/shadow/spacing, icons, app shell, buttons, badges, PO status badges, cards/KPIs, forms, tabs, tables, alerts/dialog, charts, formatting conventions, do/don't). - Wireframe/ds-bundle/: per-component @dsCard preview cards (Foundations / Layout / Components) used to sync the design system to the claude.ai Design System project. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
33 lines
2.9 KiB
HTML
33 lines
2.9 KiB
HTML
<!-- @dsCard group="Components" name="Alerts & dialog" subtitle="semantic -50 tint + -700 text · modal" width="700" height="440" -->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>PPMS · Alerts</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<script>tailwind.config={theme:{extend:{colors:{primary:{50:"#eff6ff",200:"#bfdbfe",800:"#1e40af"},success:{50:"#f0fdf4",100:"#dcfce7",700:"#15803d"},warning:{50:"#fffbeb",100:"#fef3c7",700:"#b45309"},danger:{DEFAULT:"#dc2626",50:"#fef2f2",100:"#fee2e2",700:"#b91c1c"},neutral:{100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",500:"#737373",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
|
||
<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
|
||
</head>
|
||
<body class="bg-neutral-50 p-6 text-neutral-900">
|
||
<h2 class="text-lg font-semibold">Alerts & dialog</h2>
|
||
<p class="mt-1 text-sm text-neutral-600">Inline callouts use the semantic <b>-50</b> tint + <b>-700</b> text + matching border.</p>
|
||
<div class="mt-4 space-y-3">
|
||
<div class="flex items-start gap-3 rounded-lg border border-primary-200 bg-primary-50 p-4 text-sm text-primary-800"><span class="font-medium">ℹ Info</span><span>Imported POs are created directly in the Closed state.</span></div>
|
||
<div class="flex items-start gap-3 rounded-lg border border-success-100 bg-success-50 p-4 text-sm text-success-700"><span class="font-medium">✓ Success</span><span>Purchase order approved and sent for payment.</span></div>
|
||
<div class="flex items-start gap-3 rounded-lg border border-warning-100 bg-warning-50 p-4 text-sm text-warning-700"><span class="font-medium">⚠ Warning</span><span>This vendor is unverified — verify before assigning a vendor code.</span></div>
|
||
<div class="flex items-start gap-3 rounded-lg border border-danger-100 bg-danger-50 p-4 text-sm text-danger-700"><span class="font-medium">✕ Error</span><span>Payment date cannot be in the future.</span></div>
|
||
</div>
|
||
<div class="mt-4 overflow-hidden rounded-lg border border-neutral-200 bg-neutral-100 p-8">
|
||
<div class="mx-auto max-w-sm rounded-lg border border-neutral-200 bg-white p-6 shadow-lg">
|
||
<h3 class="text-base font-semibold text-neutral-900">Delete accounting code?</h3>
|
||
<p class="mt-1 text-sm text-neutral-500">This removes <b>5110 · Fuel & Lubricants</b>. This action can't be undone.</p>
|
||
<div class="mt-5 flex justify-end gap-2">
|
||
<button class="inline-flex h-10 items-center rounded-lg border border-neutral-300 bg-white px-4 text-sm font-medium text-neutral-700 hover:bg-neutral-50">Cancel</button>
|
||
<button class="inline-flex h-10 items-center rounded-lg bg-danger px-4 text-sm font-medium text-white hover:opacity-90">Delete</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|