Skip to content

fix: standardize design system tokens and typography #198

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RhysSullivan merged 3 commits into from
Apr 11, 2026
Merged

fix: standardize design system tokens and typography #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
248b942
fix: standardize design system tokens and typography
RhysSullivan Apr 11, 2026
a7840c7
bump sidebar nav items from text-xs to text-sm
RhysSullivan Apr 11, 2026
a7bf390
bump text-xs to text-sm for readable content
RhysSullivan Apr 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions apps/cloud/src/routes/billing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ function BillingPage() {
<div className="flex items-center justify-between py-4">
<div>
<div className="flex items-center gap-2">
<p className="text-[0.8125rem] font-medium text-foreground leading-none">
<p className="text-sm font-medium text-foreground leading-none">
{planName}
</p>
{isSwitching && (
Expand All @@ -79,7 +79,7 @@ function BillingPage() {
</Badge>
)}
</div>
<p className="mt-1 text-[0.75rem] text-muted-foreground/70 leading-none">
<p className="mt-1 text-xs text-muted-foreground leading-none">
{isSwitching && sub?.currentPeriodEnd
? `Starts ${new Date(sub.currentPeriodEnd).toLocaleDateString(undefined, { month: "long", day: "numeric", year: "numeric" })}`
: isCanceling && sub?.currentPeriodEnd
Expand All @@ -95,14 +95,14 @@ function BillingPage() {
variant="ghost"
type="button"
onClick={() => openCustomerPortal()}
className="rounded-md px-3 py-1.5 text-[0.75rem] font-medium text-destructive transition-colors hover:bg-destructive/10"
className="rounded-md px-3 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/10"
>
Cancel plan
</Button>
)}
<Link
to="/billing/plans"
className="rounded-md bg-primary px-3 py-1.5 text-[0.75rem] font-medium text-primary-foreground transition-colors hover:bg-primary/90"
className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
>
Manage
</Link>
Expand All @@ -116,10 +116,10 @@ function BillingPage() {
{executions && (
<div className="py-4">
<div className="flex items-center justify-between mb-2">
<p className="text-[0.8125rem] font-medium text-foreground">Executions</p>
<p className="text-[0.8125rem] tabular-nums text-muted-foreground">
<p className="text-sm font-medium text-foreground">Executions</p>
<p className="text-sm tabular-nums text-muted-foreground">
{executions.usage.toLocaleString()}
<span className="text-muted-foreground/50">
<span className="text-muted-foreground">
{" / "}
{executions.granted.toLocaleString()} this month
</span>
Expand Down
18 changes: 9 additions & 9 deletions apps/cloud/src/routes/billing_.plans.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ function PlansPage() {
<div className="mb-8">
<Link
to="/billing"
className="inline-flex items-center gap-1 text-[0.8125rem] text-muted-foreground hover:text-foreground transition-colors mb-4"
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors mb-4"
>
<svg viewBox="0 0 16 16" fill="none" className="size-3.5">
<path
Expand All @@ -74,7 +74,7 @@ function PlansPage() {
<h1 className="font-display text-3xl tracking-tight text-foreground lg:text-4xl">
Choose a plan
</h1>
<p className="mt-1.5 text-[0.875rem] text-muted-foreground">
<p className="mt-1.5 text-sm text-muted-foreground">
Pick the plan that works for you. Upgrade or downgrade anytime.
</p>
</div>
Expand Down Expand Up @@ -117,7 +117,7 @@ function PlansPage() {
].join(" ")}
>
<div className="flex items-center justify-between">
<p className="text-[0.9375rem] font-semibold text-foreground leading-none">
<p className="text-base font-semibold text-foreground leading-none">
{plan.name}
</p>
{isCurrent && (
Expand All @@ -136,30 +136,30 @@ function PlansPage() {
</Badge>
)}
</div>
<p className="mt-1 text-[0.75rem] text-muted-foreground/70">{meta.tagline}</p>
<p className="mt-1 text-sm text-muted-foreground">{meta.tagline}</p>

<div className="mt-4 flex items-baseline gap-1.5">
<span className="text-2xl font-semibold text-foreground tabular-nums">
${plan.price?.amount ?? 0}
</span>
{plan.price?.interval && (
<span className="text-[0.75rem] text-muted-foreground/60">
<span className="text-sm text-muted-foreground">
USD / seat / {plan.price.interval}
</span>
)}
</div>

<div className="mt-4">
{(isCurrent && !isCanceling) || isScheduled ? (
<div className="flex h-9 items-center justify-center rounded-md border border-border bg-muted/30 text-[0.8125rem] font-medium text-muted-foreground">
<div className="flex h-9 items-center justify-center rounded-md border border-border bg-muted/30 text-sm font-medium text-muted-foreground">
{isCurrent ? "Current plan" : "Scheduled"}
</div>
) : isCanceling ? (
<Button
type="button"
disabled={loadingPlan !== null}
onClick={() => openCustomerPortal()}
className="flex h-9 w-full items-center justify-center rounded-md bg-primary text-[0.8125rem] font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60"
className="flex h-9 w-full items-center justify-center rounded-md bg-primary text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60"
>
Resume
</Button>
Expand All @@ -173,7 +173,7 @@ function PlansPage() {
setLoadingPlan(null);
}}
className={[
"flex h-9 w-full items-center justify-center rounded-md text-[0.8125rem] font-medium transition-colors disabled:opacity-60",
"flex h-9 w-full items-center justify-center rounded-md text-sm font-medium transition-colors disabled:opacity-60",
isUpgradeAction
? "bg-primary text-primary-foreground hover:bg-primary/90"
: "border border-border bg-background text-foreground hover:bg-muted",
Expand All @@ -188,7 +188,7 @@ function PlansPage() {
{meta.features.map((f) => (
<li
key={f}
className="flex items-start gap-2 text-[0.75rem] text-muted-foreground"
className="flex items-start gap-2 text-xs text-muted-foreground"
>
<svg
viewBox="0 0 16 16"
Expand Down
30 changes: 15 additions & 15 deletions apps/cloud/src/routes/org.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,7 @@ function OrgPage() {
{member.avatarUrl ? (
<img src={member.avatarUrl} alt="" className="size-8 rounded-full" />
) : (
<div className="flex size-8 items-center justify-center rounded-full bg-muted text-[0.625rem] font-semibold text-muted-foreground">
<div className="flex size-8 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground">
{member.name
? member.name
.split(" ")
Expand All @@ -368,7 +368,7 @@ function OrgPage() {
{/* Name + email */}
<div className="min-w-0">
<div className="flex items-center gap-2">
<p className="truncate text-[0.8125rem] font-medium text-foreground leading-none">
<p className="truncate text-sm font-medium text-foreground leading-none">
{member.name ?? member.email}
</p>
{member.isCurrentUser && (
Expand All @@ -381,19 +381,19 @@ function OrgPage() {
)}
</div>
{member.name && (
<p className="mt-0.5 truncate text-[0.75rem] text-muted-foreground leading-none">
<p className="mt-0.5 truncate text-xs text-muted-foreground leading-none">
{member.email}
</p>
)}
</div>

{/* Role */}
<p className="text-[0.8125rem] text-muted-foreground capitalize leading-none">
<p className="text-sm text-muted-foreground capitalize leading-none">
{member.role}
</p>

{/* Last active */}
<p className="text-[0.75rem] text-muted-foreground leading-none">
<p className="text-xs text-muted-foreground leading-none">
{formatLastActive(member.lastActiveAt)}
</p>

Expand All @@ -417,14 +417,14 @@ function OrgPage() {
{roles.length > 0 && (
<>
<DropdownMenuSub>
<DropdownMenuSubTrigger className="text-[0.75rem]">
<DropdownMenuSubTrigger className="text-xs">
Change role
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
{roles.map((role) => (
<DropdownMenuItem
key={role.slug}
className="text-[0.75rem]"
className="text-xs"
disabled={role.slug === member.role}
onClick={() =>
handleChangeRole(member.id, role.slug, role.name)
Expand Down Expand Up @@ -452,7 +452,7 @@ function OrgPage() {
</>
)}
<DropdownMenuItem
className="text-destructive focus:text-destructive text-[0.75rem]"
className="text-destructive focus:text-destructive text-sm"
onClick={() => handleRemove(member.id, member.name ?? member.email)}
>
Remove member
Expand Down Expand Up @@ -539,7 +539,7 @@ function DomainCard({
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-44">
<DropdownMenuItem
className="text-destructive focus:text-destructive text-[0.75rem]"
className="text-destructive focus:text-destructive text-sm"
onClick={onDelete}
>
Remove domain
Expand Down Expand Up @@ -618,7 +618,7 @@ function InviteDialog(props: {
<DialogContent className="sm:max-w-[400px]">
<DialogHeader>
<DialogTitle className="font-display text-xl">Invite member</DialogTitle>
<DialogDescription className="text-[0.8125rem] leading-relaxed">
<DialogDescription className="text-sm leading-relaxed">
Send an email invitation to join your organization.
</DialogDescription>
</DialogHeader>
Expand All @@ -627,7 +627,7 @@ function InviteDialog(props: {
<div className="grid gap-1.5">
<Label
htmlFor="invite-email"
className="text-[0.6875rem] font-medium uppercase tracking-wider text-muted-foreground"
className="text-sm font-medium uppercase tracking-wider text-muted-foreground"
>
Email
</Label>
Expand All @@ -642,23 +642,23 @@ function InviteDialog(props: {
onKeyDown={(e) => {
if (e.key === "Enter") handleInvite();
}}
className="text-[0.8125rem] h-9"
className="text-sm h-9"
/>
</div>

{props.roles.length > 0 && (
<div className="grid gap-1.5">
<Label
htmlFor="invite-role"
className="text-[0.6875rem] font-medium uppercase tracking-wider text-muted-foreground"
className="text-sm font-medium uppercase tracking-wider text-muted-foreground"
>
Role
</Label>
<Select
value={state.roleSlug}
onValueChange={(v) => dispatch({ type: "setRole", roleSlug: v })}
>
<SelectTrigger id="invite-role" className="h-9 text-[0.8125rem]">
<SelectTrigger id="invite-role" className="h-9 text-sm">
<SelectValue placeholder="Select a role" />
</SelectTrigger>
<SelectContent>
Expand All @@ -674,7 +674,7 @@ function InviteDialog(props: {

{state.status === "error" && state.error && (
<div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
<p className="text-[0.75rem] text-destructive">{state.error}</p>
<p className="text-sm text-destructive">{state.error}</p>
</div>
)}
</div>
Expand Down
22 changes: 11 additions & 11 deletions apps/cloud/src/web/shell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function NavItem(props: { to: string; label: string; active: boolean; onNavigate
to={props.to}
onClick={props.onNavigate}
className={[
"flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors",
"flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
props.active
? "bg-sidebar-active text-foreground font-medium"
: "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
Expand All @@ -47,14 +47,14 @@ function SourceList(props: { pathname: string; onNavigate?: () => void }) {

return Result.match(sources, {
onInitial: () => (
<div className="px-2.5 py-2 text-[11px] text-muted-foreground/40">Loading…</div>
<div className="px-2.5 py-2 text-xs text-muted-foreground">Loading…</div>
),
onFailure: () => (
<div className="px-2.5 py-2 text-[11px] text-muted-foreground/40">No sources yet</div>
<div className="px-2.5 py-2 text-xs text-muted-foreground">No sources yet</div>
),
onSuccess: ({ value }) =>
value.length === 0 ? (
<div className="px-2.5 py-2 text-[11px] leading-relaxed text-muted-foreground/40">
<div className="px-2.5 py-2 text-sm leading-relaxed text-muted-foreground">
No sources yet
</div>
) : (
Expand All @@ -70,15 +70,15 @@ function SourceList(props: { pathname: string; onNavigate?: () => void }) {
params={{ namespace: s.id }}
onClick={props.onNavigate}
className={[
"group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-[13px] transition-colors",
"group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs transition-colors",
active
? "bg-sidebar-active text-foreground font-medium"
: "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
].join(" ")}
>
<SourceFavicon url={s.url} />
<span className="flex-1 truncate">{s.name}</span>
<span className="rounded bg-secondary/50 px-1 py-px text-[9px] font-medium text-muted-foreground/50">
<span className="rounded bg-secondary/50 px-1 py-px text-xs font-medium text-muted-foreground">
{s.kind}
</span>
</Link>
Expand Down Expand Up @@ -110,24 +110,24 @@ function UserFooter() {
{auth.user.avatarUrl ? (
<img src={auth.user.avatarUrl} alt="" className="size-7 shrink-0 rounded-full" />
) : (
<div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[10px] font-semibold text-primary">
<div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
{initials}
</div>
)}
<div className="min-w-0 flex-1">
<p className="truncate text-[12px] font-medium text-foreground">
<p className="truncate text-xs font-medium text-foreground">
{auth.user.name ?? auth.user.email}
</p>
{auth.organization && (
<p className="truncate text-[10px] text-muted-foreground">{auth.organization.name}</p>
<p className="truncate text-xs text-muted-foreground">{auth.organization.name}</p>
)}
</div>
<form action={AUTH_PATHS.logout} method="post">
<Button
variant="ghost"
size="icon-xs"
type="submit"
className="shrink-0 text-muted-foreground/50 hover:bg-sidebar-active hover:text-foreground"
className="shrink-0 text-muted-foreground hover:bg-sidebar-active hover:text-foreground"
title="Sign out"
>
<svg viewBox="0 0 16 16" fill="none" className="size-3.5">
Expand Down Expand Up @@ -170,7 +170,7 @@ function SidebarContent(props: { pathname: string; onNavigate?: () => void; show
<NavItem to="/org" label="Organization" active={isOrg} onNavigate={props.onNavigate} />
<NavItem to="/billing" label="Billing" active={isBilling} onNavigate={props.onNavigate} />

<div className="mt-5 mb-1 px-2.5 text-[10px] font-medium uppercase tracking-widest text-muted-foreground/50">
<div className="mt-5 mb-1 px-2.5 text-xs font-medium uppercase tracking-widest text-muted-foreground">
<span>Sources</span>
</div>

Expand Down
Loading
Loading