Skip to content

feat(ui): fix theme architecture, semantic color tokens, Geist fonts #316

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
ajianaz merged 1 commit into from
Sep 3, 2026
Merged

feat(ui): fix theme architecture, semantic color tokens, Geist fonts #316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 8 additions & 8 deletions web/build/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,32 @@
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="/_app/immutable/entry/start.D2DElZOc.js" rel="modulepreload">
<link href="/_app/immutable/chunks/CGD5FpIt.js" rel="modulepreload">
<link href="/_app/immutable/entry/start.0EfKWloI.js" rel="modulepreload">
<link href="/_app/immutable/chunks/B6AduMOh.js" rel="modulepreload">
<link href="/_app/immutable/chunks/Cca5XcAr.js" rel="modulepreload">
<link href="/_app/immutable/entry/app.o3EtqHxp.js" rel="modulepreload">
<link href="/_app/immutable/entry/app.HI1UzXj1.js" rel="modulepreload">
<link href="/_app/immutable/chunks/kNaey6uv.js" rel="modulepreload">
<link href="/_app/immutable/chunks/xihTtKlq.js" rel="modulepreload">
<link href="/_app/immutable/nodes/0.SV3TCvT0.js" rel="modulepreload">
<link href="/_app/immutable/nodes/0.DamGPcfi.js" rel="modulepreload">
<link href="/_app/immutable/chunks/BscTVQ9J.js" rel="modulepreload">
<link href="/_app/immutable/chunks/D_M18t6X.js" rel="modulepreload">
<link href="/_app/immutable/chunks/fe7zj1-L.js" rel="modulepreload">

<link href="/_app/immutable/assets/0.Cv8yMDRc.css" rel="stylesheet">
<link href="/_app/immutable/assets/0.BNL21c07.css" rel="stylesheet">
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">
<script>
{
__sveltekit_1hf2gre = {
__sveltekit_xkujp8 = {
base: ""
};

const element = document.currentScript.parentElement;

Promise.all([
import("/_app/immutable/entry/start.D2DElZOc.js"),
import("/_app/immutable/entry/app.o3EtqHxp.js")
import("/_app/immutable/entry/start.0EfKWloI.js"),
import("/_app/immutable/entry/app.HI1UzXj1.js")
]).then(([kit, app]) => {
kit.start(app, element);
});
Expand Down
22 changes: 22 additions & 0 deletions web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,9 @@
"typescript": "^6.0.2",
"vite": "^8.0.7",
"vitest": "^4.1.8"
},
"dependencies": {
"@fontsource-variable/geist": "^5.3.0",
"@fontsource-variable/geist-mono": "^5.3.0"
}
}
128 changes: 84 additions & 44 deletions web/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,93 @@
@import 'tailwindcss';
@import '@fontsource-variable/geist';
@import '@fontsource-variable/geist-mono';

/* ── Semantic tokens ─────────────────────────────────────────────
Values live on plain custom properties so the .dark class (toggled
by mode-watcher) swaps them at runtime. `@theme inline` maps the
Tailwind color utilities to those vars; never put literal colors
in this block — utilities would inline them and ignore .dark. */
:root {
--background: oklch(0.985 0 0);
--foreground: oklch(0.205 0.006 265);
--card: oklch(1 0 0);
--card-foreground: oklch(0.205 0.006 265);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.205 0.006 265);
--primary: oklch(0.205 0.006 265);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.96 0.005 265);
--secondary-foreground: oklch(0.25 0.015 265);
--muted: oklch(0.96 0.005 265);
--muted-foreground: oklch(0.545 0.015 265);
--accent: oklch(0.96 0.005 265);
--accent-foreground: oklch(0.25 0.015 265);
--destructive: oklch(0.55 0.22 25);
--destructive-foreground: oklch(0.985 0 0);
--success: oklch(0.53 0.15 150);
--warning: oklch(0.62 0.15 75);
--info: oklch(0.53 0.13 240);
--border: oklch(0.9 0.005 265);
--input: oklch(0.9 0.005 265);
--ring: oklch(0.5 0.02 265);
color-scheme: light;
}

.dark {
--background: oklch(0.145 0.015 265);
--foreground: oklch(0.92 0.01 265);
--card: oklch(0.18 0.015 265);
--card-foreground: oklch(0.92 0.01 265);
--popover: oklch(0.18 0.015 265);
--popover-foreground: oklch(0.92 0.01 265);
--primary: oklch(0.92 0.01 265);
--primary-foreground: oklch(0.145 0.015 265);
--secondary: oklch(0.27 0.015 265);
--secondary-foreground: oklch(0.92 0.01 265);
--muted: oklch(0.27 0.015 265);
--muted-foreground: oklch(0.68 0.015 265);
--accent: oklch(0.27 0.015 265);
--accent-foreground: oklch(0.92 0.01 265);
--destructive: oklch(0.66 0.2 25);
--destructive-foreground: oklch(0.985 0 0);
--success: oklch(0.74 0.16 150);
--warning: oklch(0.8 0.15 85);
--info: oklch(0.72 0.12 240);
--border: oklch(0.3 0.015 265);
--input: oklch(0.3 0.015 265);
--ring: oklch(0.65 0.02 265);
color-scheme: dark;
}

@theme inline {
/* ── Zinc (default dark-first) ────────────────────────────── */
--color-background: oklch(0.145 0.015 265);
--color-foreground: oklch(0.985 0 0);
--color-card: oklch(0.18 0.015 265);
--color-card-foreground: oklch(0.985 0 0);
--color-popover: oklch(0.18 0.015 265);
--color-popover-foreground: oklch(0.985 0 0);
--color-primary: oklch(0.985 0 0);
--color-primary-foreground: oklch(0.145 0.015 265);
--color-secondary: oklch(0.27 0.015 265);
--color-secondary-foreground: oklch(0.985 0 0);
--color-muted: oklch(0.27 0.015 265);
--color-muted-foreground: oklch(0.7 0.015 265);
--color-accent: oklch(0.27 0.015 265);
--color-accent-foreground: oklch(0.985 0 0);
--color-destructive: oklch(0.55 0.22 25);
--color-destructive-foreground: oklch(0.985 0 0);
--color-border: oklch(0.35 0.015 265);
--color-input: oklch(0.35 0.015 265);
--color-ring: oklch(0.6 0.15 265);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-success: var(--success);
--color-warning: var(--warning);
--color-info: var(--info);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--font-sans: 'Geist Variable', system-ui, -apple-system, sans-serif;
--font-mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', monospace;
}

@layer base {
Expand All @@ -35,29 +98,6 @@
body {
background-color: var(--color-background);
color: var(--color-foreground);
font-family: system-ui, -apple-system, sans-serif;
}

/* Light mode override */
:root:not(.dark) {
--color-background: oklch(0.985 0 0);
--color-foreground: oklch(0.145 0.015 265);
--color-card: oklch(0.985 0 0);
--color-card-foreground: oklch(0.145 0.015 265);
--color-popover: oklch(0.985 0 0);
--color-popover-foreground: oklch(0.145 0.015 265);
--color-primary: oklch(0.25 0.15 265);
--color-primary-foreground: oklch(0.985 0 0);
--color-secondary: oklch(0.96 0.005 265);
--color-secondary-foreground: oklch(0.25 0.015 265);
--color-muted: oklch(0.96 0.005 265);
--color-muted-foreground: oklch(0.55 0.015 265);
--color-accent: oklch(0.96 0.005 265);
--color-accent-foreground: oklch(0.25 0.015 265);
--color-destructive: oklch(0.55 0.22 25);
--color-destructive-foreground: oklch(0.985 0 0);
--color-border: oklch(0.87 0.005 265);
--color-input: oklch(0.87 0.005 265);
--color-ring: oklch(0.45 0.15 265);
font-family: var(--font-sans);
}
}
38 changes: 19 additions & 19 deletions web/src/lib/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,26 +54,26 @@ export function statusColor(status: string): BadgeVariant {
*/
export function levelTextClass(level: string): string {
const map: Record<string, string> = {
fatal: 'text-red-600',
error: 'text-red-500',
warning: 'text-yellow-500',
info: 'text-blue-500',
debug: 'text-gray-500',
trace: 'text-gray-400'
fatal: 'text-destructive',
error: 'text-destructive',
warning: 'text-warning',
info: 'text-info',
debug: 'text-muted-foreground',
trace: 'text-muted-foreground'
};
return map[level] ?? 'text-gray-500';
return map[level] ?? 'text-muted-foreground';
}

/**
* Map issue status to Tailwind text color class.
*/
export function statusTextClass(status: string): string {
const map: Record<string, string> = {
unresolved: 'text-red-500',
resolved: 'text-green-600',
ignored: 'text-gray-500'
unresolved: 'text-destructive',
resolved: 'text-success',
ignored: 'text-muted-foreground'
};
return map[status] ?? 'text-gray-500';
return map[status] ?? 'text-muted-foreground';
}

// ── Time formatting ───────────────────────────────────────────────────
Expand Down Expand Up @@ -125,20 +125,20 @@ export function formatDuration(ms: number): string {
*/
export function transactionStatusTextClass(status: string): string {
const map: Record<string, string> = {
ok: 'text-green-600',
deadline_exceeded: 'text-red-500',
cancelled: 'text-yellow-500',
unknown: 'text-gray-500'
ok: 'text-success',
deadline_exceeded: 'text-destructive',
cancelled: 'text-warning',
unknown: 'text-muted-foreground'
};
return map[status] ?? 'text-gray-500';
return map[status] ?? 'text-muted-foreground';
}

/**
* Map crash rate to Tailwind text color class.
*/
export function crashRateColor(rate: number | null): string {
if (rate === null) return "";
if (rate < 1) return "text-green-500";
if (rate < 5) return "text-yellow-500";
return "text-red-500";
if (rate < 1) return "text-success";
if (rate < 5) return "text-warning";
return "text-destructive";
}
4 changes: 2 additions & 2 deletions web/src/routes/(dashboard)/issues/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,8 @@
<h1 class="text-2xl font-bold">Issues</h1>
<div class="flex items-center gap-2">
{#if liveIndicator}
<span class="inline-flex items-center gap-1 text-xs text-emerald-500">
<span class="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
<span class="inline-flex items-center gap-1 text-xs text-success">
<span class="h-2 w-2 rounded-full bg-success animate-pulse"></span>
Live
</span>
{/if}
Expand Down
24 changes: 12 additions & 12 deletions web/src/routes/(dashboard)/release-health/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,13 +277,13 @@
<div class="flex h-4 rounded-full overflow-hidden bg-muted mb-3">
{#if aggregateExited > 0}
<div
class="bg-green-500 h-full"
class="bg-success h-full"
style="width: {(aggregateExited / aggregateTotal * 100)}%"
></div>
{/if}
{#if aggregateErrored > 0}
<div
class="bg-yellow-500 h-full"
class="bg-warning h-full"
style="width: {(aggregateErrored / aggregateTotal * 100)}%"
></div>
{/if}
Expand All @@ -295,20 +295,20 @@
{/if}
{#if aggregateCrashed > 0}
<div
class="bg-red-500 h-full"
class="bg-destructive h-full"
style="width: {(aggregateCrashed / aggregateTotal * 100)}%"
></div>
{/if}
</div>
<div class="flex items-center gap-4 text-sm">
<span class="flex items-center gap-1.5">
<span class="h-2.5 w-2.5 rounded-full bg-green-500"></span>
<span class="text-green-600 dark:text-green-400 font-medium">{aggregateExited}</span>
<span class="h-2.5 w-2.5 rounded-full bg-success"></span>
<span class="text-success font-medium">{aggregateExited}</span>
<span class="text-muted-foreground">exited</span>
</span>
<span class="flex items-center gap-1.5">
<span class="h-2.5 w-2.5 rounded-full bg-yellow-500"></span>
<span class="text-yellow-600 dark:text-yellow-400 font-medium">{aggregateErrored}</span>
<span class="h-2.5 w-2.5 rounded-full bg-warning"></span>
<span class="text-warning font-medium">{aggregateErrored}</span>
<span class="text-muted-foreground">errored</span>
</span>
<span class="flex items-center gap-1.5">
Expand All @@ -317,8 +317,8 @@
<span class="text-muted-foreground">abnormal</span>
</span>
<span class="flex items-center gap-1.5">
<span class="h-2.5 w-2.5 rounded-full bg-red-500"></span>
<span class="text-red-600 dark:text-red-400 font-medium">{aggregateCrashed}</span>
<span class="h-2.5 w-2.5 rounded-full bg-destructive"></span>
<span class="text-destructive font-medium">{aggregateCrashed}</span>
<span class="text-muted-foreground">crashed</span>
</span>
</div>
Expand Down Expand Up @@ -379,16 +379,16 @@
{s.crash_rate !== null ? s.crash_rate.toFixed(2) + '%' : '—'}
</span>
</TableCell>
<TableCell class="hidden md:table-cell text-center text-green-600 dark:text-green-400 font-medium">
<TableCell class="hidden md:table-cell text-center text-success font-medium">
{s.exited}
</TableCell>
<TableCell class="hidden md:table-cell text-center text-yellow-600 dark:text-yellow-400 font-medium">
<TableCell class="hidden md:table-cell text-center text-warning font-medium">
{s.errored}
</TableCell>
<TableCell class="hidden md:table-cell text-center text-orange-600 dark:text-orange-400 font-medium">
{s.abnormal}
</TableCell>
<TableCell class="text-center text-red-600 dark:text-red-400 font-medium">
<TableCell class="text-center text-destructive font-medium">
{s.crashed}
</TableCell>
<TableCell class="text-muted-foreground text-sm">
Expand Down
2 changes: 1 addition & 1 deletion web/src/routes/(dashboard)/settings/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
<p class="text-sm text-destructive">{passwordError}</p>
{/if}
{#if passwordSuccess}
<p class="text-sm text-emerald-500">{passwordSuccess}</p>
<p class="text-sm text-success">{passwordSuccess}</p>
{/if}

<Button type="submit">Update Password</Button>
Expand Down
Loading
Loading