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>
36 lines
3.6 KiB
HTML
36 lines
3.6 KiB
HTML
<!-- @dsCard group="Components" name="Buttons" subtitle="7 variants × 4 sizes (CVA)" width="760" height="260" -->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>PPMS · Buttons</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:{600:"#2563eb",700:"#1d4ed8"},success:{DEFAULT:"#16a34a"},warning:{DEFAULT:"#d97706",50:"#fffbeb",100:"#fef3c7",700:"#b45309"},danger:{DEFAULT:"#dc2626"},neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",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">Buttons</h2>
|
||
<p class="mt-1 text-sm text-neutral-600">From <code>components/ui/button.tsx</code> (CVA). Base: <code>inline-flex items-center gap-2 rounded-lg text-sm font-medium</code> + focus ring.</p>
|
||
<div class="mt-4 space-y-4 rounded-lg border border-neutral-200 bg-white p-5">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<button class="inline-flex h-10 items-center gap-2 rounded-lg bg-primary-600 px-4 text-sm font-medium text-white hover:bg-primary-700">Default</button>
|
||
<button class="inline-flex h-10 items-center gap-2 rounded-lg border border-neutral-300 bg-white px-4 text-sm font-medium text-neutral-700 hover:bg-neutral-50">Secondary</button>
|
||
<button class="inline-flex h-10 items-center gap-2 rounded-lg bg-success px-4 text-sm font-medium text-white hover:opacity-90">Success</button>
|
||
<button class="inline-flex h-10 items-center gap-2 rounded-lg border border-warning bg-warning-50 px-4 text-sm font-medium text-warning-700 hover:bg-warning-100">Warning</button>
|
||
<button class="inline-flex h-10 items-center gap-2 rounded-lg bg-danger px-4 text-sm font-medium text-white hover:opacity-90">Destructive</button>
|
||
<button class="inline-flex h-10 items-center gap-2 rounded-lg px-4 text-sm font-medium text-neutral-700 hover:bg-neutral-100">Ghost</button>
|
||
<button class="inline-flex h-10 items-center gap-2 rounded-lg px-1 text-sm font-medium text-primary-600 underline-offset-4 hover:underline" style="color:#2563eb">Link</button>
|
||
<button class="inline-flex h-10 items-center gap-2 rounded-lg bg-primary-600 px-4 text-sm font-medium text-white opacity-60" disabled>Disabled</button>
|
||
</div>
|
||
<div class="flex flex-wrap items-center gap-3 border-t border-neutral-100 pt-4">
|
||
<button class="inline-flex h-8 items-center gap-1.5 rounded-lg bg-primary-600 px-3 text-xs font-medium text-white">sm · h-8</button>
|
||
<button class="inline-flex h-10 items-center gap-2 rounded-lg bg-primary-600 px-4 text-sm font-medium text-white">md · h-10</button>
|
||
<button class="inline-flex h-11 items-center gap-2 rounded-lg bg-primary-600 px-5 text-sm font-medium text-white">lg · h-11</button>
|
||
<button class="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-neutral-300 bg-white text-neutral-700"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
|
||
</div>
|
||
<p class="text-xs text-neutral-400"><code>variant="default|secondary|success|warning|destructive|ghost|link"</code> · <code>size="sm|md|lg|icon"</code></p>
|
||
</div>
|
||
</body>
|
||
</html>
|