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

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

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

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

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