mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 16:02:26 +00:00
314 lines
12 KiB
HTML
314 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Bitvid Design System Kitchen Sink</title>
|
|
<link rel="stylesheet" href="../css/tailwind.generated.css" />
|
|
</head>
|
|
<body class="bg-page font-sans text-text-strong">
|
|
<div class="min-h-screen bg-page-alt">
|
|
<header class="bg-surface text-text shadow-modal">
|
|
<div
|
|
class="mx-auto flex max-w-6xl items-center justify-between px-md py-sm"
|
|
>
|
|
<h1 class="text-2xl font-semibold">Bitvid UI Kitchen Sink</h1>
|
|
<button class="btn">Primary Action</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="mx-auto max-w-6xl space-y-xl px-md py-xl">
|
|
<section class="space-y-md">
|
|
<div class="space-y-xs">
|
|
<h2 class="text-xl font-semibold text-text-strong">Buttons</h2>
|
|
<p class="text-sm text-muted">
|
|
Each block shows the default, simulated hover, focus, and disabled
|
|
states.
|
|
</p>
|
|
</div>
|
|
<div class="grid gap-lg lg:grid-cols-2">
|
|
<div class="space-y-sm">
|
|
<h3 class="text-lg font-semibold">Primary (.btn)</h3>
|
|
<div class="grid gap-sm sm:grid-cols-2 xl:grid-cols-4">
|
|
<div class="space-y-xs">
|
|
<p class="text-xs uppercase text-muted">Default</p>
|
|
<button class="btn">Default</button>
|
|
</div>
|
|
<div class="space-y-xs">
|
|
<p class="text-xs uppercase text-muted">Hover (simulated)</p>
|
|
<button class="btn bg-info-strong shadow-lg">Hover</button>
|
|
</div>
|
|
<div class="space-y-xs">
|
|
<p class="text-xs uppercase text-muted">Focus (simulated)</p>
|
|
<button
|
|
class="btn bg-info-pressed ring-2 ring-info ring-opacity-70 ring-offset-2 ring-offset-surface"
|
|
>
|
|
Focus
|
|
</button>
|
|
</div>
|
|
<div class="space-y-xs">
|
|
<p class="text-xs uppercase text-muted">Disabled</p>
|
|
<button class="btn" disabled>Disabled</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-sm">
|
|
<h3 class="text-lg font-semibold">Ghost (.btn-ghost)</h3>
|
|
<div class="grid gap-sm sm:grid-cols-2 xl:grid-cols-4">
|
|
<div class="space-y-xs">
|
|
<p class="text-xs uppercase text-muted">Default</p>
|
|
<button class="btn-ghost">Default</button>
|
|
</div>
|
|
<div class="space-y-xs">
|
|
<p class="text-xs uppercase text-muted">Hover (simulated)</p>
|
|
<button class="btn-ghost bg-panel-hover text-text">
|
|
Hover
|
|
</button>
|
|
</div>
|
|
<div class="space-y-xs">
|
|
<p class="text-xs uppercase text-muted">Focus (simulated)</p>
|
|
<button
|
|
class="btn-ghost bg-panel-hover ring-2 ring-info ring-opacity-70 ring-offset-2 ring-offset-surface"
|
|
>
|
|
Focus
|
|
</button>
|
|
</div>
|
|
<div class="space-y-xs">
|
|
<p class="text-xs uppercase text-muted">Disabled</p>
|
|
<button class="btn-ghost" disabled>Disabled</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="space-y-md">
|
|
<div class="space-y-xs">
|
|
<h2 class="text-xl font-semibold text-text-strong">Badges</h2>
|
|
<p class="text-sm text-muted">
|
|
Use `data-variant` for semantic colorways.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-sm">
|
|
<span class="badge">Default</span>
|
|
<span class="badge" data-variant="info">Info</span>
|
|
<span class="badge" data-variant="critical">Critical</span>
|
|
<span class="badge" data-variant="neutral">Neutral</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="space-y-md">
|
|
<div class="space-y-xs">
|
|
<h2 class="text-xl font-semibold text-text-strong">Cards</h2>
|
|
<p class="text-sm text-muted">
|
|
Cards inherit focus-ring behaviour and support semantic states.
|
|
</p>
|
|
</div>
|
|
<div class="grid-stack" data-variant="cards">
|
|
<article class="card p-md">
|
|
<h3 class="text-lg font-semibold">Default Card</h3>
|
|
<p class="mt-xs text-muted">
|
|
Combine with layout utilities like `p-md` or `gap-sm` for
|
|
content spacing.
|
|
</p>
|
|
<button class="btn mt-sm">Watch</button>
|
|
</article>
|
|
<article
|
|
class="card -translate-y-1 bg-card p-md shadow-lg transition-none"
|
|
>
|
|
<h3 class="text-lg font-semibold">Hover (simulated)</h3>
|
|
<p class="mt-xs text-muted">Applies the hover shadow and lift.</p>
|
|
</article>
|
|
<article
|
|
class="card bg-card p-md ring-2 ring-info ring-opacity-70 ring-offset-2 ring-offset-surface"
|
|
>
|
|
<h3 class="text-lg font-semibold">Focus (simulated)</h3>
|
|
<p class="mt-xs text-muted">Rings appear on `focus-visible`.</p>
|
|
</article>
|
|
<article class="card p-md" data-state="disabled">
|
|
<h3 class="text-lg font-semibold">Disabled</h3>
|
|
<p class="mt-xs text-muted">
|
|
Opacity drops and the shadow is removed.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="space-y-md">
|
|
<div class="space-y-xs">
|
|
<h2 class="text-xl font-semibold text-text-strong">Form Inputs</h2>
|
|
<p class="text-sm text-muted">
|
|
`.input` works for both `<input>` and `<textarea>`
|
|
elements.
|
|
</p>
|
|
</div>
|
|
<div class="grid gap-md md:grid-cols-2">
|
|
<div class="space-y-xs">
|
|
<label
|
|
class="text-sm font-medium text-muted"
|
|
for="demo-input-default"
|
|
>Default</label
|
|
>
|
|
<input
|
|
id="demo-input-default"
|
|
class="input"
|
|
type="text"
|
|
placeholder="Display name"
|
|
/>
|
|
</div>
|
|
<div class="space-y-xs">
|
|
<label
|
|
class="text-sm font-medium text-muted"
|
|
for="demo-input-hover"
|
|
>Hover (simulated)</label
|
|
>
|
|
<input
|
|
id="demo-input-hover"
|
|
class="input border-border"
|
|
type="text"
|
|
value="Hovering"
|
|
/>
|
|
</div>
|
|
<div class="space-y-xs">
|
|
<label
|
|
class="text-sm font-medium text-muted"
|
|
for="demo-input-focus"
|
|
>Focus (simulated)</label
|
|
>
|
|
<input
|
|
id="demo-input-focus"
|
|
class="input border-info-strong ring-2 ring-info ring-opacity-70 ring-offset-2 ring-offset-surface"
|
|
type="text"
|
|
value="In focus"
|
|
/>
|
|
</div>
|
|
<div class="space-y-xs">
|
|
<label
|
|
class="text-sm font-medium text-muted"
|
|
for="demo-input-disabled"
|
|
>Disabled</label
|
|
>
|
|
<input
|
|
id="demo-input-disabled"
|
|
class="input"
|
|
type="text"
|
|
value="Read only"
|
|
disabled
|
|
/>
|
|
</div>
|
|
<div class="space-y-xs md:col-span-2">
|
|
<label class="text-sm font-medium text-muted" for="demo-textarea"
|
|
>Textarea</label
|
|
>
|
|
<textarea
|
|
id="demo-textarea"
|
|
class="input"
|
|
rows="3"
|
|
placeholder="Describe the video..."
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="space-y-md">
|
|
<div class="space-y-xs">
|
|
<h2 class="text-xl font-semibold text-text-strong">
|
|
Focus Ring Helper
|
|
</h2>
|
|
<p class="text-sm text-muted">
|
|
Add `.focus-ring` to custom interactives when you opt out of
|
|
`.btn` or other primitives.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-sm">
|
|
<a
|
|
href="#"
|
|
class="focus-ring inline-flex items-center gap-xs rounded-md border border-border bg-panel px-sm py-xs text-text no-underline"
|
|
>
|
|
Focusable Link
|
|
</a>
|
|
<button
|
|
class="focus-ring inline-flex items-center gap-xs rounded-md border border-border px-sm py-xs"
|
|
>
|
|
Plain Button
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="space-y-md">
|
|
<div class="space-y-xs">
|
|
<h2 class="text-xl font-semibold text-text-strong">
|
|
Modal Surface
|
|
</h2>
|
|
<p class="text-sm text-muted">
|
|
`.bv-modal` anchors the overlay, `.bv-modal-backdrop` dims the
|
|
page, and `.bv-modal__panel` styles content.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="relative isolate overflow-hidden rounded-xl bg-surface-alt p-lg text-text shadow-inner"
|
|
>
|
|
<div class="absolute inset-0" style="position: relative">
|
|
<div class="bv-modal" style="position: absolute; inset: 0">
|
|
<div class="bv-modal-backdrop"></div>
|
|
<div class="bv-modal__panel space-y-sm">
|
|
<h3 class="text-lg font-semibold">Upload Video</h3>
|
|
<p class="text-muted">
|
|
Use `.input` and `.btn` primitives inside panels for
|
|
consistency.
|
|
</p>
|
|
<input class="input" type="text" placeholder="Magnet URI" />
|
|
<div class="flex justify-end gap-sm">
|
|
<button class="btn-ghost">Cancel</button>
|
|
<button class="btn">Publish</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="space-y-md">
|
|
<div class="space-y-xs">
|
|
<h2 class="text-xl font-semibold text-text-strong">Grid Stack</h2>
|
|
<p class="text-sm text-muted">
|
|
Use `data-variant="cards"` for responsive columns or
|
|
`data-orientation="vertical"` for flex stacks.
|
|
</p>
|
|
</div>
|
|
<div class="grid gap-lg lg:grid-cols-2">
|
|
<div class="space-y-sm">
|
|
<h3 class="text-lg font-semibold">Card Grid</h3>
|
|
<div class="grid-stack" data-variant="cards">
|
|
<div class="card p-md">
|
|
<p class="text-sm text-muted">Card A</p>
|
|
</div>
|
|
<div class="card p-md">
|
|
<p class="text-sm text-muted">Card B</p>
|
|
</div>
|
|
<div class="card p-md">
|
|
<p class="text-sm text-muted">Card C</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-sm">
|
|
<h3 class="text-lg font-semibold">Vertical Stack</h3>
|
|
<div class="grid-stack" data-orientation="vertical">
|
|
<div class="card p-sm">
|
|
<p class="text-sm text-muted">Row 1</p>
|
|
</div>
|
|
<div class="card p-sm">
|
|
<p class="text-sm text-muted">Row 2</p>
|
|
</div>
|
|
<div class="card p-sm" data-state="disabled">
|
|
<p class="text-sm text-muted">Row 3 (disabled)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|