sass/root-org
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: overhaul home page, style guide, account settings - Home page: bg-background, border-based org cards, material icons, compact typography - Style guide: new header with back button, rounded-xl swatches, consistent section headings - Account settings: replace bg-background rounded-[32px] with border-based rounded-xl cards - svelte-check: 0 errors, vitest: 112/112 passed

Browse Source
This commit is contained in:
AlacrisDevs
2026-02-07 11:18:23 +02:00
parent 819d5b876a
commit 9d5e58f858
3 changed files with 151 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/routes/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { getContext } from "svelte";
import { Button, Card, Modal, Input } from "$lib/components/ui";
import { Button, Modal, Input } from "$lib/components/ui";
import { createOrganization, generateSlug } from "$lib/api/organizations";
import { toasts } from "$lib/stores/toast.svelte";
import type { SupabaseClient } from "@supabase/supabase-js";
@@ -58,108 +58,53 @@
<title>Organizations | Root</title>
</svelte:head>
<div class="min-h-screen bg-dark">
<header class="border-b border-light/10 bg-surface">
<div
class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"
>
<h1 class="text-xl font-bold text-light">Root Org</h1>
<div class="flex items-center gap-4">
<a href="/style" class="text-sm text-light/60 hover:text-light"
>Style Guide</a
>
<div class="min-h-screen bg-background">
<!-- Header -->
<header class="border-b border-light/5">
<div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-rounded text-primary" style="font-size: 28px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 28;">hub</span>
<span class="font-heading text-h4 text-white">Root</span>
</div>
<div class="flex items-center gap-2">
<a href="/style" class="px-3 py-1.5 text-[12px] text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors">Style Guide</a>
<form method="POST" action="/auth/logout">
<Button variant="tertiary" size="sm" type="submit"
>Sign Out</Button
>
<Button variant="tertiary" size="sm" type="submit">Sign Out</Button>
</form>
</div>
</div>
</header>
<main class="max-w-6xl mx-auto px-6 py-8">
<div class="flex items-center justify-between mb-8">
<main class="max-w-5xl mx-auto px-6 py-8">
<div class="flex items-center justify-between mb-6">
<div>
<h2 class="text-2xl font-bold text-light">
Your Organizations
</h2>
<p class="text-light/50 mt-1">
Select an organization to get started
</p>
<h2 class="font-heading text-h3 text-white">Your Organizations</h2>
<p class="text-body-sm text-light/40 mt-1">Select an organization to get started</p>
</div>
<Button onclick={() => (showCreateModal = true)}>
<svg
class="w-4 h-4 mr-2"
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>
New Organization
</Button>
<Button size="sm" icon="add" onclick={() => (showCreateModal = true)}>New Organization</Button>
</div>
{#if organizations.length === 0}
<Card>
<div class="p-12 text-center">
<svg
class="w-16 h-16 mx-auto mb-4 text-light/30"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
>
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
<h3 class="text-lg font-medium text-light mb-2">
No organizations yet
</h3>
<p class="text-light/50 mb-6">
Create your first organization to start collaborating
</p>
<Button onclick={() => (showCreateModal = true)}
>Create Organization</Button
>
<div class="bg-dark/30 border border-light/5 rounded-xl p-12 text-center">
<span class="material-symbols-rounded text-light/20 mb-3 block" style="font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;">groups</span>
<h3 class="font-heading text-body text-white mb-1">No organizations yet</h3>
<p class="text-body-sm text-light/40 mb-6">Create your first organization to start collaborating</p>
<Button size="sm" icon="add" onclick={() => (showCreateModal = true)}>Create Organization</Button>
</div>
</Card>
{:else}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
{#each organizations as org}
<a href="/{org.slug}" class="block group">
<Card
class="h-full hover:ring-1 hover:ring-primary/50 transition-all"
>
<div class="p-6">
<div
class="flex items-start justify-between mb-4"
>
<div
class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center text-primary font-bold text-lg"
>
<div class="bg-dark/30 border border-light/5 hover:border-light/10 rounded-xl p-5 transition-all h-full">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary font-heading text-body">
{org.name.charAt(0).toUpperCase()}
</div>
<span
class="text-xs px-2 py-1 bg-light/10 rounded text-light/60 capitalize"
>
{org.role}
</span>
<span class="text-[10px] px-2 py-0.5 bg-light/5 rounded-md text-light/40 capitalize font-body">{org.role}</span>
</div>
<h3
class="text-lg font-semibold text-light group-hover:text-primary transition-colors"
>
{org.name}
</h3>
<p class="text-sm text-light/40 mt-1">
/{org.slug}
</p>
<h3 class="font-heading text-body-sm text-white group-hover:text-primary transition-colors">{org.name}</h3>
<p class="text-[11px] text-light/30 mt-0.5 font-body">/{org.slug}</p>
</div>
</Card>
</a>
{/each}
</div>

42
src/routes/[orgSlug]/account/+page.svelte
View File

@@ -227,17 +227,17 @@
<title>Account Settings | Root</title>
</svelte:head>
<div class="flex-1 p-6">
<div class="flex-1 p-6 overflow-auto">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<!-- Profile Section -->
<div class="bg-background rounded-[32px] p-6 flex flex-col gap-6">
<h2 class="font-heading text-h3 text-white">
<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
<h2 class="font-heading text-body text-white">
{m.account_profile()}
</h2>
<!-- Avatar -->
<div class="flex flex-col gap-3">
<span class="font-body text-body-sm text-light"
<span class="font-body text-body-sm text-light/60"
>{m.account_photo()}</span
>
<div class="flex items-center gap-4">
@@ -306,8 +306,8 @@
</div>
<!-- Appearance Section -->
<div class="bg-background rounded-[32px] p-6 flex flex-col gap-6">
<h2 class="font-heading text-h3 text-white">
<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
<h2 class="font-heading text-body text-white">
{m.account_appearance()}
</h2>
@@ -325,7 +325,7 @@
<!-- Accent Color -->
<div class="flex flex-col gap-2">
<span class="font-body text-body-sm text-light"
<span class="font-body text-body-sm text-light/60"
>{m.account_accent_color()}</span
>
<div class="flex flex-wrap gap-2 items-center">
@@ -363,10 +363,10 @@
<!-- Use Org Theme -->
<div class="flex items-center justify-between">
<div>
<p class="font-body text-body text-white">
<p class="font-body text-body-sm text-white">
{m.account_use_org_theme()}
</p>
<p class="font-body text-[12px] text-light/50">
<p class="font-body text-[11px] text-light/40">
{m.account_use_org_theme_desc()}
</p>
</div>
@@ -388,20 +388,20 @@
<!-- Language -->
<div class="flex flex-col gap-2">
<span class="font-body text-body-sm text-light"
<span class="font-body text-body-sm text-light/60"
>{m.account_language()}</span
>
<p class="font-body text-[12px] text-light/50">
<p class="font-body text-[11px] text-light/40">
{m.account_language_desc()}
</p>
<div class="flex gap-2 mt-1">
{#each locales as locale}
<button
type="button"
class="px-4 py-2 rounded-full text-sm font-medium transition-colors {currentLocale ===
class="px-3 py-1.5 rounded-lg text-[12px] font-medium transition-colors {currentLocale ===
locale
? 'bg-primary text-night'
: 'bg-light/10 text-light/70 hover:bg-light/20'}"
? 'bg-primary text-background'
: 'bg-light/5 text-light/50 hover:bg-light/10'}"
onclick={() => handleLanguageChange(locale)}
>
{localeLabels[locale] ?? locale}
@@ -418,16 +418,16 @@
</div>
<!-- Security & Sessions Section -->
<div class="bg-background rounded-[32px] p-6 flex flex-col gap-6">
<h2 class="font-heading text-h3 text-white">
<div class="bg-dark/30 border border-light/5 rounded-xl p-5 flex flex-col gap-5">
<h2 class="font-heading text-body text-white">
{m.account_security()}
</h2>
<div class="flex flex-col gap-2">
<p class="font-body text-body text-white">
<p class="font-body text-body-sm text-white">
{m.account_password()}
</p>
<p class="font-body text-body-sm text-light/50">
<p class="font-body text-[11px] text-light/40">
{m.account_password_desc()}
</p>
<div class="mt-2">
@@ -452,11 +452,11 @@
</div>
</div>
<div class="border-t border-light/10 pt-4 flex flex-col gap-2">
<p class="font-body text-body text-white">
<div class="border-t border-light/5 pt-4 flex flex-col gap-2">
<p class="font-body text-body-sm text-white">
{m.account_active_sessions()}
</p>
<p class="font-body text-body-sm text-light/50">
<p class="font-body text-[11px] text-light/40">
{m.account_sessions_desc()}
</p>
<div class="mt-2">

324
src/routes/style/+page.svelte
View File

@@ -36,97 +36,76 @@
<title>Style Guide | Root</title>
</svelte:head>
<div class="min-h-screen bg-dark p-8">
<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>
<div class="min-h-screen bg-background">
<!-- Header -->
<header class="text-center space-y-4">
<h1 class="text-4xl font-bold text-light">Root Style Guide</h1>
<p class="text-light/60">All UI components and their variants</p>
<header class="border-b border-light/5">
<div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<a href="/" class="p-1.5 text-light/40 hover:text-white hover:bg-dark/50 rounded-lg transition-colors">
<span class="material-symbols-rounded" style="font-size: 20px;">arrow_back</span>
</a>
<span class="font-heading text-body text-white">Style Guide</span>
<span class="text-[11px] text-light/30 font-body">All UI components and their variants</span>
</div>
</div>
</header>
<!-- Colors - Figma Design System -->
<div class="max-w-5xl mx-auto px-6 py-8 space-y-10">
<!-- Colors -->
<section class="space-y-4">
<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="space-y-2">
<div
class="w-full h-20 rounded-[32px] bg-background border border-light/20"
></div>
<p class="text-sm text-light/60">Background</p>
<code class="text-xs text-light/40">#05090F</code>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Colors</h2>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3">
<div class="space-y-1.5">
<div class="w-full h-16 rounded-xl bg-background border border-light/10"></div>
<p class="text-[12px] text-light/60 font-body">Background</p>
<code class="text-[10px] text-light/30">#05090F</code>
</div>
<div class="space-y-2">
<div class="w-full h-20 rounded-[32px] bg-night"></div>
<p class="text-sm text-light/60">Night</p>
<code class="text-xs text-light/40">#0A121F</code>
<div class="space-y-1.5">
<div class="w-full h-16 rounded-xl bg-night"></div>
<p class="text-[12px] text-light/60 font-body">Night</p>
<code class="text-[10px] text-light/30">#0A121F</code>
</div>
<div class="space-y-2">
<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 class="space-y-1.5">
<div class="w-full h-16 rounded-xl bg-dark"></div>
<p class="text-[12px] text-light/60 font-body">Dark</p>
<code class="text-[10px] text-light/30">#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>
<code class="text-xs text-light/40">#E5E6F0</code>
<div class="space-y-1.5">
<div class="w-full h-16 rounded-xl bg-light"></div>
<p class="text-[12px] text-light/60 font-body">Light</p>
<code class="text-[10px] text-light/30">#E5E6F0</code>
</div>
<div class="space-y-2">
<div class="w-full h-20 rounded-[32px] bg-primary"></div>
<p class="text-sm text-light/60">Primary</p>
<code class="text-xs text-light/40">#00A3E0</code>
<div class="space-y-1.5">
<div class="w-full h-16 rounded-xl bg-primary"></div>
<p class="text-[12px] text-light/60 font-body">Primary</p>
<code class="text-[10px] text-light/30">#00A3E0</code>
</div>
<div class="space-y-2">
<div class="w-full h-20 rounded-[32px] bg-success"></div>
<p class="text-sm text-light/60">Success</p>
<code class="text-xs text-light/40">#33E000</code>
<div class="space-y-1.5">
<div class="w-full h-16 rounded-xl bg-success"></div>
<p class="text-[12px] text-light/60 font-body">Success</p>
<code class="text-[10px] text-light/30">#33E000</code>
</div>
<div class="space-y-2">
<div class="w-full h-20 rounded-[32px] bg-warning"></div>
<p class="text-sm text-light/60">Warning</p>
<code class="text-xs text-light/40">#FFAB00</code>
<div class="space-y-1.5">
<div class="w-full h-16 rounded-xl bg-warning"></div>
<p class="text-[12px] text-light/60 font-body">Warning</p>
<code class="text-[10px] text-light/30">#FFAB00</code>
</div>
<div class="space-y-2">
<div class="w-full h-20 rounded-[32px] bg-error"></div>
<p class="text-sm text-light/60">Error</p>
<code class="text-xs text-light/40">#E03D00</code>
<div class="space-y-1.5">
<div class="w-full h-16 rounded-xl bg-error"></div>
<p class="text-[12px] text-light/60 font-body">Error</p>
<code class="text-[10px] text-light/30">#E03D00</code>
</div>
</div>
</section>
<!-- Buttons -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Buttons
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Buttons</h2>
<div class="space-y-6">
<div class="space-y-5">
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Variants
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Variants</h3>
<div class="flex flex-wrap gap-3">
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
@@ -137,9 +116,7 @@
</div>
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Sizes
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
<div class="flex flex-wrap items-center gap-3">
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
@@ -148,9 +125,7 @@
</div>
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
With Icons (Material Symbols)
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">With Icons</h3>
<div class="flex flex-wrap items-center gap-3">
<Button icon="add">Add Item</Button>
<Button variant="secondary" icon="edit">Edit</Button>
@@ -160,9 +135,7 @@
</div>
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
States
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">States</h3>
<div class="flex flex-wrap gap-3">
<Button>Normal</Button>
<Button disabled>Disabled</Button>
@@ -171,9 +144,7 @@
</div>
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Full Width
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Full Width</h3>
<div class="max-w-sm">
<Button fullWidth icon="rocket_launch"
>Full Width Button</Button
@@ -185,11 +156,7 @@
<!-- Inputs -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Inputs
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Inputs</h2>
<div class="grid md:grid-cols-2 gap-6">
<Input
@@ -229,11 +196,7 @@
<!-- Textarea -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Textarea
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Textarea</h2>
<div class="grid md:grid-cols-2 gap-6">
<Textarea
@@ -251,11 +214,7 @@
<!-- Select -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Select
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Select</h2>
<div class="grid md:grid-cols-2 gap-6">
<Select
@@ -273,17 +232,11 @@
<!-- Avatars -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Avatars
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Avatars</h2>
<div class="space-y-6">
<div class="space-y-5">
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Sizes
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
<div class="flex items-end gap-4">
<Avatar name="John Doe" size="sm" />
<Avatar name="John Doe" size="md" />
@@ -293,9 +246,7 @@
</div>
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
With Status (placeholder)
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">With Status</h3>
<div class="flex items-center gap-4">
<Avatar name="Online User" size="lg" />
<Avatar name="Away User" size="lg" />
@@ -305,9 +256,7 @@
</div>
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Different Names (Color Generation)
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Color Generation</h3>
<div class="flex items-center gap-4">
<Avatar name="Alice" size="lg" />
<Avatar name="Bob" size="lg" />
@@ -321,17 +270,11 @@
<!-- Chips -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Chips
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Chips</h2>
<div class="space-y-6">
<div class="space-y-5">
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Variants
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Variants</h3>
<div class="flex flex-wrap gap-3">
<Chip variant="primary">Primary</Chip>
<Chip variant="success">Success</Chip>
@@ -345,11 +288,7 @@
<!-- List Items -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
List Items
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">List Items</h2>
<div class="max-w-[240px] space-y-2">
<ListItem icon="info">Default Item</ListItem>
@@ -364,11 +303,7 @@
<!-- Org Header -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Organization Header
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Organization Header</h2>
<div class="max-w-[240px] space-y-4">
<OrgHeader name="Acme Corp" role="Admin" />
@@ -379,11 +314,7 @@
<!-- Calendar Day -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Calendar Day
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Calendar Day</h2>
<div class="flex gap-1 max-w-[720px]">
<CalendarDay day="Mon" isHeader />
@@ -403,17 +334,11 @@
<!-- Badges -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Badges
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Badges</h2>
<div class="space-y-6">
<div class="space-y-5">
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Variants
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Variants</h3>
<div class="flex flex-wrap gap-3">
<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
@@ -425,9 +350,7 @@
</div>
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Sizes
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
<div class="flex flex-wrap items-center gap-3">
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
@@ -439,11 +362,7 @@
<!-- Cards -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Cards
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Cards</h2>
<div class="grid md:grid-cols-3 gap-6">
<Card variant="default">
@@ -469,17 +388,11 @@
<!-- Toggle -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Toggle
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Toggle</h2>
<div class="space-y-6">
<div class="space-y-5">
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Sizes
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
<div class="flex items-center gap-6">
<div class="flex items-center gap-2">
<Toggle size="sm" />
@@ -497,9 +410,7 @@
</div>
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
States
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">States</h3>
<div class="flex items-center gap-6">
<div class="flex items-center gap-2">
<Toggle />
@@ -520,17 +431,11 @@
<!-- Spinners -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Spinners
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Spinners</h2>
<div class="space-y-6">
<div class="space-y-5">
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Sizes
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Sizes</h3>
<div class="flex items-center gap-6">
<Spinner size="sm" />
<Spinner size="md" />
@@ -539,9 +444,7 @@
</div>
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Colors
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Colors</h3>
<div class="flex items-center gap-6">
<Spinner color="primary" />
<Spinner color="light" />
@@ -555,11 +458,7 @@
<!-- Modal -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Modal
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Modal</h2>
<div>
<Button onclick={() => (modalOpen = true)}>Open Modal</Button>
@@ -584,18 +483,12 @@
<!-- Typography -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Typography
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Typography</h2>
<div class="space-y-6">
<div class="space-y-5">
<!-- Headings (Tilt Warp) -->
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Headings &mdash; Tilt Warp
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Headings &mdash; Tilt Warp</h3>
<div class="space-y-3">
<div class="flex items-baseline gap-4">
<span
@@ -644,9 +537,7 @@
<!-- Button Text (Tilt Warp) -->
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Button Text &mdash; Tilt Warp
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Button Text &mdash; Tilt Warp</h3>
<div class="space-y-3">
<div class="flex items-baseline gap-4">
<span
@@ -680,9 +571,7 @@
<!-- Body Text (Work Sans) -->
<div>
<h3 class="text-lg font-medium text-light/80 mb-3">
Body &mdash; Work Sans
</h3>
<h3 class="text-body-sm font-heading text-light/60 mb-2">Body &mdash; Work Sans</h3>
<div class="space-y-3">
<div class="flex items-baseline gap-4">
<span
@@ -721,11 +610,7 @@
<!-- Toasts -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Toasts
</h2>
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Toasts</h2>
<div class="space-y-4">
<Toast
variant="success"
@@ -752,15 +637,9 @@
<!-- Logo -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Logo
</h2>
<p class="text-light/60">
Brand logo component with size variants.
</p>
<div class="flex items-center gap-8 bg-night p-6 rounded-xl">
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Logo</h2>
<p class="text-[12px] text-light/40 font-body">Brand logo component with size variants.</p>
<div class="flex items-center gap-8 bg-dark/30 border border-light/5 p-5 rounded-xl">
<div class="flex flex-col items-center gap-2">
<Logo size="sm" />
<span class="text-xs text-light/60">Small</span>
@@ -774,16 +653,9 @@
<!-- ContentHeader -->
<section class="space-y-4">
<h2
class="text-2xl font-semibold text-light border-b border-light/10 pb-2"
>
Content Header
</h2>
<p class="text-light/60">
Page header component with avatar, title, action button, and
more menu.
</p>
<div class="bg-night p-6 rounded-xl space-y-4">
<h2 class="font-heading text-body text-white border-b border-light/5 pb-2">Content Header</h2>
<p class="text-[12px] text-light/40 font-body">Page header component with avatar, title, action button, and more menu.</p>
<div class="bg-dark/30 border border-light/5 p-5 rounded-xl space-y-4">
<ContentHeader
title="Page Title"
actionLabel="+ New"
@@ -796,10 +668,8 @@
</section>
<!-- Footer -->
<footer class="text-center py-8 border-t border-light/10">
<p class="text-light/40 text-sm">
Root Organization Platform - Style Guide
</p>
<footer class="text-center py-8 border-t border-light/5">
<p class="text-[11px] text-light/30 font-body">Root Organization Platform &mdash; Style Guide</p>
</footer>
</div>
</div>