|
|
|
@ -9,19 +9,20 @@ |
|
|
|
Card, |
|
|
|
Card, |
|
|
|
Modal, |
|
|
|
Modal, |
|
|
|
Spinner, |
|
|
|
Spinner, |
|
|
|
Toggle |
|
|
|
Toggle, |
|
|
|
} from '$lib/components/ui'; |
|
|
|
Toast, |
|
|
|
|
|
|
|
} from "$lib/components/ui"; |
|
|
|
|
|
|
|
|
|
|
|
let inputValue = $state(''); |
|
|
|
let inputValue = $state(""); |
|
|
|
let textareaValue = $state(''); |
|
|
|
let textareaValue = $state(""); |
|
|
|
let selectValue = $state(''); |
|
|
|
let selectValue = $state(""); |
|
|
|
let toggleChecked = $state(false); |
|
|
|
let toggleChecked = $state(false); |
|
|
|
let modalOpen = $state(false); |
|
|
|
let modalOpen = $state(false); |
|
|
|
|
|
|
|
|
|
|
|
const selectOptions = [ |
|
|
|
const selectOptions = [ |
|
|
|
{ value: 'option1', label: 'Option 1' }, |
|
|
|
{ value: "option1", label: "Option 1" }, |
|
|
|
{ value: 'option2', label: 'Option 2' }, |
|
|
|
{ value: "option2", label: "Option 2" }, |
|
|
|
{ value: 'option3', label: 'Option 3' } |
|
|
|
{ value: "option3", label: "Option 3" }, |
|
|
|
]; |
|
|
|
]; |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
@ -31,66 +32,95 @@ |
|
|
|
|
|
|
|
|
|
|
|
<div class="min-h-screen bg-dark p-8"> |
|
|
|
<div class="min-h-screen bg-dark p-8"> |
|
|
|
<div class="max-w-6xl mx-auto space-y-12"> |
|
|
|
<div class="max-w-6xl mx-auto space-y-12"> |
|
|
|
|
|
|
|
<!-- Back Button --> |
|
|
|
|
|
|
|
<a |
|
|
|
|
|
|
|
href="/" |
|
|
|
|
|
|
|
class="inline-flex items-center gap-2 text-light/60 hover:text-light transition-colors" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<svg |
|
|
|
|
|
|
|
class="w-5 h-5" |
|
|
|
|
|
|
|
viewBox="0 0 24 24" |
|
|
|
|
|
|
|
fill="none" |
|
|
|
|
|
|
|
stroke="currentColor" |
|
|
|
|
|
|
|
stroke-width="2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<path d="M19 12H5M12 19l-7-7 7-7" /> |
|
|
|
|
|
|
|
</svg> |
|
|
|
|
|
|
|
Back to Home |
|
|
|
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Header --> |
|
|
|
<!-- Header --> |
|
|
|
<header class="text-center space-y-4"> |
|
|
|
<header class="text-center space-y-4"> |
|
|
|
<h1 class="text-4xl font-bold text-light">Root Style Guide</h1> |
|
|
|
<h1 class="text-4xl font-bold text-light">Root Style Guide</h1> |
|
|
|
<p class="text-light/60">All UI components and their variants</p> |
|
|
|
<p class="text-light/60">All UI components and their variants</p> |
|
|
|
</header> |
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Colors --> |
|
|
|
<!-- Colors - Figma Design System --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Colors</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Colors |
|
|
|
|
|
|
|
</h2> |
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="w-full h-20 rounded-xl bg-dark border border-light/20"></div> |
|
|
|
<div |
|
|
|
<p class="text-sm text-light/60">Dark</p> |
|
|
|
class="w-full h-20 rounded-[32px] bg-background border border-light/20" |
|
|
|
<code class="text-xs text-light/40">#0a0a0f</code> |
|
|
|
></div> |
|
|
|
|
|
|
|
<p class="text-sm text-light/60">Background</p> |
|
|
|
|
|
|
|
<code class="text-xs text-light/40">#05090F</code> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="w-full h-20 rounded-xl bg-surface"></div> |
|
|
|
<div class="w-full h-20 rounded-[32px] bg-night"></div> |
|
|
|
<p class="text-sm text-light/60">Surface</p> |
|
|
|
<p class="text-sm text-light/60">Night</p> |
|
|
|
<code class="text-xs text-light/40">#14141f</code> |
|
|
|
<code class="text-xs text-light/40">#0A121F</code> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="w-full h-20 rounded-xl bg-light"></div> |
|
|
|
<div class="w-full h-20 rounded-[32px] bg-dark"></div> |
|
|
|
|
|
|
|
<p class="text-sm text-light/60">Dark</p> |
|
|
|
|
|
|
|
<code class="text-xs text-light/40">#14243E</code> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="space-y-2"> |
|
|
|
|
|
|
|
<div class="w-full h-20 rounded-[32px] bg-light"></div> |
|
|
|
<p class="text-sm text-light/60">Light</p> |
|
|
|
<p class="text-sm text-light/60">Light</p> |
|
|
|
<code class="text-xs text-light/40">#f0f0f5</code> |
|
|
|
<code class="text-xs text-light/40">#E5E6F0</code> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="w-full h-20 rounded-xl bg-primary"></div> |
|
|
|
<div class="w-full h-20 rounded-[32px] bg-primary"></div> |
|
|
|
<p class="text-sm text-light/60">Primary</p> |
|
|
|
<p class="text-sm text-light/60">Primary</p> |
|
|
|
<code class="text-xs text-light/40">#6366f1</code> |
|
|
|
<code class="text-xs text-light/40">#00A3E0</code> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="w-full h-20 rounded-xl bg-success"></div> |
|
|
|
<div class="w-full h-20 rounded-[32px] bg-success"></div> |
|
|
|
<p class="text-sm text-light/60">Success</p> |
|
|
|
<p class="text-sm text-light/60">Success</p> |
|
|
|
<code class="text-xs text-light/40">#22c55e</code> |
|
|
|
<code class="text-xs text-light/40">#33E000</code> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="w-full h-20 rounded-xl bg-warning"></div> |
|
|
|
<div class="w-full h-20 rounded-[32px] bg-warning"></div> |
|
|
|
<p class="text-sm text-light/60">Warning</p> |
|
|
|
<p class="text-sm text-light/60">Warning</p> |
|
|
|
<code class="text-xs text-light/40">#f59e0b</code> |
|
|
|
<code class="text-xs text-light/40">#FFAB00</code> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="space-y-2"> |
|
|
|
<div class="w-full h-20 rounded-xl bg-error"></div> |
|
|
|
<div class="w-full h-20 rounded-[32px] bg-error"></div> |
|
|
|
<p class="text-sm text-light/60">Error</p> |
|
|
|
<p class="text-sm text-light/60">Error</p> |
|
|
|
<code class="text-xs text-light/40">#ef4444</code> |
|
|
|
<code class="text-xs text-light/40">#E03D00</code> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="space-y-2"> |
|
|
|
|
|
|
|
<div class="w-full h-20 rounded-xl bg-info"></div> |
|
|
|
|
|
|
|
<p class="text-sm text-light/60">Info</p> |
|
|
|
|
|
|
|
<code class="text-xs text-light/40">#3b82f6</code> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Buttons --> |
|
|
|
<!-- Buttons --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Buttons</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Buttons |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
<div class="space-y-6"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">Variants</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
Variants |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex flex-wrap gap-3"> |
|
|
|
<div class="flex flex-wrap gap-3"> |
|
|
|
<Button variant="primary">Primary</Button> |
|
|
|
<Button variant="primary">Primary</Button> |
|
|
|
<Button variant="secondary">Secondary</Button> |
|
|
|
<Button variant="secondary">Secondary</Button> |
|
|
|
@ -101,9 +131,10 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">Sizes</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
Sizes |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex flex-wrap items-center gap-3"> |
|
|
|
<div class="flex flex-wrap items-center gap-3"> |
|
|
|
<Button size="xs">Extra Small</Button> |
|
|
|
|
|
|
|
<Button size="sm">Small</Button> |
|
|
|
<Button size="sm">Small</Button> |
|
|
|
<Button size="md">Medium</Button> |
|
|
|
<Button size="md">Medium</Button> |
|
|
|
<Button size="lg">Large</Button> |
|
|
|
<Button size="lg">Large</Button> |
|
|
|
@ -111,7 +142,9 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">States</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
States |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex flex-wrap gap-3"> |
|
|
|
<div class="flex flex-wrap gap-3"> |
|
|
|
<Button>Normal</Button> |
|
|
|
<Button>Normal</Button> |
|
|
|
<Button disabled>Disabled</Button> |
|
|
|
<Button disabled>Disabled</Button> |
|
|
|
@ -120,7 +153,9 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">Full Width</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
Full Width |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="max-w-sm"> |
|
|
|
<div class="max-w-sm"> |
|
|
|
<Button fullWidth>Full Width Button</Button> |
|
|
|
<Button fullWidth>Full Width Button</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -130,45 +165,103 @@ |
|
|
|
|
|
|
|
|
|
|
|
<!-- Inputs --> |
|
|
|
<!-- Inputs --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Inputs</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Inputs |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
<Input label="Default Input" placeholder="Enter text..." bind:value={inputValue} /> |
|
|
|
<Input |
|
|
|
<Input label="Required Field" placeholder="Required..." required /> |
|
|
|
label="Default Input" |
|
|
|
<Input label="With Hint" placeholder="Email..." hint="We'll never share your email" /> |
|
|
|
placeholder="Enter text..." |
|
|
|
<Input label="With Error" placeholder="Password..." error="Password is too short" /> |
|
|
|
bind:value={inputValue} |
|
|
|
<Input label="Disabled" placeholder="Can't edit this" disabled /> |
|
|
|
/> |
|
|
|
<Input type="password" label="Password" placeholder="••••••••" /> |
|
|
|
<Input |
|
|
|
|
|
|
|
label="Required Field" |
|
|
|
|
|
|
|
placeholder="Required..." |
|
|
|
|
|
|
|
required |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<Input |
|
|
|
|
|
|
|
label="With Hint" |
|
|
|
|
|
|
|
placeholder="Email..." |
|
|
|
|
|
|
|
hint="We'll never share your email" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<Input |
|
|
|
|
|
|
|
label="With Error" |
|
|
|
|
|
|
|
placeholder="Password..." |
|
|
|
|
|
|
|
error="Password is too short" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<Input |
|
|
|
|
|
|
|
label="Disabled" |
|
|
|
|
|
|
|
placeholder="Can't edit this" |
|
|
|
|
|
|
|
disabled |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<Input |
|
|
|
|
|
|
|
type="password" |
|
|
|
|
|
|
|
label="Password" |
|
|
|
|
|
|
|
placeholder="••••••••" |
|
|
|
|
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Textarea --> |
|
|
|
<!-- Textarea --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Textarea</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Textarea |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
<Textarea label="Default Textarea" placeholder="Enter description..." bind:value={textareaValue} /> |
|
|
|
<Textarea |
|
|
|
<Textarea label="With Error" placeholder="Description..." error="Description is required" /> |
|
|
|
label="Default Textarea" |
|
|
|
|
|
|
|
placeholder="Enter description..." |
|
|
|
|
|
|
|
bind:value={textareaValue} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<Textarea |
|
|
|
|
|
|
|
label="With Error" |
|
|
|
|
|
|
|
placeholder="Description..." |
|
|
|
|
|
|
|
error="Description is required" |
|
|
|
|
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Select --> |
|
|
|
<!-- Select --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Select</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Select |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
<Select label="Default Select" options={selectOptions} bind:value={selectValue} /> |
|
|
|
<Select |
|
|
|
<Select label="With Error" options={selectOptions} error="Please select an option" /> |
|
|
|
label="Default Select" |
|
|
|
|
|
|
|
options={selectOptions} |
|
|
|
|
|
|
|
bind:value={selectValue} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<Select |
|
|
|
|
|
|
|
label="With Error" |
|
|
|
|
|
|
|
options={selectOptions} |
|
|
|
|
|
|
|
error="Please select an option" |
|
|
|
|
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Avatars --> |
|
|
|
<!-- Avatars --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Avatars</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Avatars |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
<div class="space-y-6"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">Sizes</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
Sizes |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex items-end gap-4"> |
|
|
|
<div class="flex items-end gap-4"> |
|
|
|
<Avatar name="John Doe" size="xs" /> |
|
|
|
<Avatar name="John Doe" size="xs" /> |
|
|
|
<Avatar name="John Doe" size="sm" /> |
|
|
|
<Avatar name="John Doe" size="sm" /> |
|
|
|
@ -180,17 +273,25 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">With Status</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
With Status |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex items-center gap-4"> |
|
|
|
<div class="flex items-center gap-4"> |
|
|
|
<Avatar name="Online User" size="lg" status="online" /> |
|
|
|
<Avatar name="Online User" size="lg" status="online" /> |
|
|
|
<Avatar name="Away User" size="lg" status="away" /> |
|
|
|
<Avatar name="Away User" size="lg" status="away" /> |
|
|
|
<Avatar name="Busy User" size="lg" status="busy" /> |
|
|
|
<Avatar name="Busy User" size="lg" status="busy" /> |
|
|
|
<Avatar name="Offline User" size="lg" status="offline" /> |
|
|
|
<Avatar |
|
|
|
|
|
|
|
name="Offline User" |
|
|
|
|
|
|
|
size="lg" |
|
|
|
|
|
|
|
status="offline" |
|
|
|
|
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">Different Names (Color Generation)</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
Different Names (Color Generation) |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex items-center gap-4"> |
|
|
|
<div class="flex items-center gap-4"> |
|
|
|
<Avatar name="Alice" size="lg" /> |
|
|
|
<Avatar name="Alice" size="lg" /> |
|
|
|
<Avatar name="Bob" size="lg" /> |
|
|
|
<Avatar name="Bob" size="lg" /> |
|
|
|
@ -204,11 +305,17 @@ |
|
|
|
|
|
|
|
|
|
|
|
<!-- Badges --> |
|
|
|
<!-- Badges --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Badges</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Badges |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
<div class="space-y-6"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">Variants</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
Variants |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex flex-wrap gap-3"> |
|
|
|
<div class="flex flex-wrap gap-3"> |
|
|
|
<Badge variant="default">Default</Badge> |
|
|
|
<Badge variant="default">Default</Badge> |
|
|
|
<Badge variant="primary">Primary</Badge> |
|
|
|
<Badge variant="primary">Primary</Badge> |
|
|
|
@ -220,7 +327,9 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">Sizes</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
Sizes |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex flex-wrap items-center gap-3"> |
|
|
|
<div class="flex flex-wrap items-center gap-3"> |
|
|
|
<Badge size="sm">Small</Badge> |
|
|
|
<Badge size="sm">Small</Badge> |
|
|
|
<Badge size="md">Medium</Badge> |
|
|
|
<Badge size="md">Medium</Badge> |
|
|
|
@ -232,31 +341,47 @@ |
|
|
|
|
|
|
|
|
|
|
|
<!-- Cards --> |
|
|
|
<!-- Cards --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Cards</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Cards |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6"> |
|
|
|
<div class="grid md:grid-cols-3 gap-6"> |
|
|
|
<Card variant="default"> |
|
|
|
<Card variant="default"> |
|
|
|
<h3 class="font-semibold text-light mb-2">Default Card</h3> |
|
|
|
<h3 class="font-semibold text-light mb-2">Default Card</h3> |
|
|
|
<p class="text-light/60 text-sm">This is a default card with medium padding.</p> |
|
|
|
<p class="text-light/60 text-sm"> |
|
|
|
|
|
|
|
This is a default card with medium padding. |
|
|
|
|
|
|
|
</p> |
|
|
|
</Card> |
|
|
|
</Card> |
|
|
|
<Card variant="elevated"> |
|
|
|
<Card variant="elevated"> |
|
|
|
<h3 class="font-semibold text-light mb-2">Elevated Card</h3> |
|
|
|
<h3 class="font-semibold text-light mb-2">Elevated Card</h3> |
|
|
|
<p class="text-light/60 text-sm">This card has a shadow for elevation.</p> |
|
|
|
<p class="text-light/60 text-sm"> |
|
|
|
|
|
|
|
This card has a shadow for elevation. |
|
|
|
|
|
|
|
</p> |
|
|
|
</Card> |
|
|
|
</Card> |
|
|
|
<Card variant="outlined"> |
|
|
|
<Card variant="outlined"> |
|
|
|
<h3 class="font-semibold text-light mb-2">Outlined Card</h3> |
|
|
|
<h3 class="font-semibold text-light mb-2">Outlined Card</h3> |
|
|
|
<p class="text-light/60 text-sm">This card has a subtle border.</p> |
|
|
|
<p class="text-light/60 text-sm"> |
|
|
|
|
|
|
|
This card has a subtle border. |
|
|
|
|
|
|
|
</p> |
|
|
|
</Card> |
|
|
|
</Card> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Toggle --> |
|
|
|
<!-- Toggle --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Toggle</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Toggle |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
<div class="space-y-6"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">Sizes</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
Sizes |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex items-center gap-6"> |
|
|
|
<div class="flex items-center gap-6"> |
|
|
|
<div class="flex items-center gap-2"> |
|
|
|
<div class="flex items-center gap-2"> |
|
|
|
<Toggle size="sm" /> |
|
|
|
<Toggle size="sm" /> |
|
|
|
@ -274,7 +399,9 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">States</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
States |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex items-center gap-6"> |
|
|
|
<div class="flex items-center gap-6"> |
|
|
|
<div class="flex items-center gap-2"> |
|
|
|
<div class="flex items-center gap-2"> |
|
|
|
<Toggle /> |
|
|
|
<Toggle /> |
|
|
|
@ -295,11 +422,17 @@ |
|
|
|
|
|
|
|
|
|
|
|
<!-- Spinners --> |
|
|
|
<!-- Spinners --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Spinners</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Spinners |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
<div class="space-y-6"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">Sizes</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
Sizes |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex items-center gap-6"> |
|
|
|
<div class="flex items-center gap-6"> |
|
|
|
<Spinner size="sm" /> |
|
|
|
<Spinner size="sm" /> |
|
|
|
<Spinner size="md" /> |
|
|
|
<Spinner size="md" /> |
|
|
|
@ -308,7 +441,9 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3">Colors</h3> |
|
|
|
<h3 class="text-lg font-medium text-light/80 mb-3"> |
|
|
|
|
|
|
|
Colors |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div class="flex items-center gap-6"> |
|
|
|
<div class="flex items-center gap-6"> |
|
|
|
<Spinner color="primary" /> |
|
|
|
<Spinner color="primary" /> |
|
|
|
<Spinner color="light" /> |
|
|
|
<Spinner color="light" /> |
|
|
|
@ -322,50 +457,112 @@ |
|
|
|
|
|
|
|
|
|
|
|
<!-- Modal --> |
|
|
|
<!-- Modal --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Modal</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Modal |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<Button onclick={() => (modalOpen = true)}>Open Modal</Button> |
|
|
|
<Button onclick={() => (modalOpen = true)}>Open Modal</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
<Modal isOpen={modalOpen} onClose={() => (modalOpen = false)} title="Example Modal"> |
|
|
|
<Modal |
|
|
|
|
|
|
|
isOpen={modalOpen} |
|
|
|
|
|
|
|
onClose={() => (modalOpen = false)} |
|
|
|
|
|
|
|
title="Example Modal" |
|
|
|
|
|
|
|
> |
|
|
|
<p class="text-light/70 mb-4"> |
|
|
|
<p class="text-light/70 mb-4"> |
|
|
|
This is an example modal dialog. You can put any content here. |
|
|
|
This is an example modal dialog. You can put any content here. |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<div class="flex gap-3 justify-end"> |
|
|
|
<div class="flex gap-3 justify-end"> |
|
|
|
<Button variant="secondary" onclick={() => (modalOpen = false)}>Cancel</Button> |
|
|
|
<Button variant="secondary" onclick={() => (modalOpen = false)} |
|
|
|
|
|
|
|
>Cancel</Button |
|
|
|
|
|
|
|
> |
|
|
|
<Button onclick={() => (modalOpen = false)}>Confirm</Button> |
|
|
|
<Button onclick={() => (modalOpen = false)}>Confirm</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
</Modal> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Typography --> |
|
|
|
<!-- Typography --> |
|
|
|
<section class="space-y-4"> |
|
|
|
<section class="space-y-4"> |
|
|
|
<h2 class="text-2xl font-semibold text-light border-b border-light/10 pb-2">Typography</h2> |
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Typography |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
<div class="space-y-4"> |
|
|
|
<h1 class="text-4xl font-bold text-light">Heading 1 (4xl bold)</h1> |
|
|
|
<h1 class="text-4xl font-bold text-light"> |
|
|
|
<h2 class="text-3xl font-bold text-light">Heading 2 (3xl bold)</h2> |
|
|
|
Heading 1 (4xl bold) |
|
|
|
<h3 class="text-2xl font-semibold text-light">Heading 3 (2xl semibold)</h3> |
|
|
|
</h1> |
|
|
|
<h4 class="text-xl font-semibold text-light">Heading 4 (xl semibold)</h4> |
|
|
|
<h2 class="text-3xl font-bold text-light"> |
|
|
|
<h5 class="text-lg font-medium text-light">Heading 5 (lg medium)</h5> |
|
|
|
Heading 2 (3xl bold) |
|
|
|
<h6 class="text-base font-medium text-light">Heading 6 (base medium)</h6> |
|
|
|
</h2> |
|
|
|
|
|
|
|
<h3 class="text-2xl font-semibold text-light"> |
|
|
|
|
|
|
|
Heading 3 (2xl semibold) |
|
|
|
|
|
|
|
</h3> |
|
|
|
|
|
|
|
<h4 class="text-xl font-semibold text-light"> |
|
|
|
|
|
|
|
Heading 4 (xl semibold) |
|
|
|
|
|
|
|
</h4> |
|
|
|
|
|
|
|
<h5 class="text-lg font-medium text-light"> |
|
|
|
|
|
|
|
Heading 5 (lg medium) |
|
|
|
|
|
|
|
</h5> |
|
|
|
|
|
|
|
<h6 class="text-base font-medium text-light"> |
|
|
|
|
|
|
|
Heading 6 (base medium) |
|
|
|
|
|
|
|
</h6> |
|
|
|
<p class="text-base text-light/80"> |
|
|
|
<p class="text-base text-light/80"> |
|
|
|
Body text (base, 80% opacity) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
|
|
|
Body text (base, 80% opacity) - Lorem ipsum dolor sit amet, |
|
|
|
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
|
|
consectetur adipiscing elit. Sed do eiusmod tempor |
|
|
|
|
|
|
|
incididunt ut labore et dolore magna aliqua. |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<p class="text-sm text-light/60"> |
|
|
|
<p class="text-sm text-light/60"> |
|
|
|
Small text (sm, 60% opacity) - Used for secondary information and hints. |
|
|
|
Small text (sm, 60% opacity) - Used for secondary |
|
|
|
|
|
|
|
information and hints. |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<p class="text-xs text-light/40"> |
|
|
|
<p class="text-xs text-light/40"> |
|
|
|
Extra small text (xs, 40% opacity) - Used for metadata and timestamps. |
|
|
|
Extra small text (xs, 40% opacity) - Used for metadata and |
|
|
|
|
|
|
|
timestamps. |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Toasts --> |
|
|
|
|
|
|
|
<section class="space-y-4"> |
|
|
|
|
|
|
|
<h2 |
|
|
|
|
|
|
|
class="text-2xl font-semibold text-light border-b border-light/10 pb-2" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
Toasts |
|
|
|
|
|
|
|
</h2> |
|
|
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
|
|
<Toast |
|
|
|
|
|
|
|
variant="success" |
|
|
|
|
|
|
|
title="Success" |
|
|
|
|
|
|
|
message="This is a success toast and will be dismissed after 5 seconds." |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<Toast |
|
|
|
|
|
|
|
variant="error" |
|
|
|
|
|
|
|
title="Error" |
|
|
|
|
|
|
|
message="This is an error toast and must be dismissed by the user." |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<Toast |
|
|
|
|
|
|
|
variant="warning" |
|
|
|
|
|
|
|
title="Warning" |
|
|
|
|
|
|
|
message="This is a warning toast and must be dismissed by the user." |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<Toast |
|
|
|
|
|
|
|
variant="info" |
|
|
|
|
|
|
|
title="Info" |
|
|
|
|
|
|
|
message="This is an info toast and must be dismissed by the user." |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Footer --> |
|
|
|
<!-- Footer --> |
|
|
|
<footer class="text-center py-8 border-t border-light/10"> |
|
|
|
<footer class="text-center py-8 border-t border-light/10"> |
|
|
|
<p class="text-light/40 text-sm">Root Organization Platform - Style Guide</p> |
|
|
|
<p class="text-light/40 text-sm"> |
|
|
|
|
|
|
|
Root Organization Platform - Style Guide |
|
|
|
|
|
|
|
</p> |
|
|
|
</footer> |
|
|
|
</footer> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
AlacrisDevs
2 days ago