refactor(docs): replace hardcoded colors with design tokens
Unify border colors (border-border), text colors (text-foreground, text-text-muted, text-primary/80), and repeated gradients (--gradient-primary-fade) across landing and layout components. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Yechan Kim committed
Apr 12, 2026 at 18:21 UTC
2a50898be6181189db0d2118be4473cb63d3885f
6 files changed
+17
-22
docs/src/app.css
+1
@@ -49,6 +49,7 @@
49
/* Layout tokens */
50
:root {
51
--header-h: 6.5rem; /* 104px — matches sticky header outer height (py-5 + py-2 + content) */
52
+ --gradient-primary-fade: linear-gradient(to right, oklch(75% 0.14 195 / 0.55), transparent);
53
}
54
55
/* Hero & landing page custom properties (not in @theme — used via var() in inline styles) */
docs/src/lib/components/Mermaid.svelte
+1
-1
@@ -43,7 +43,7 @@
43
<div class="not-prose my-6">
44
<div bind:this={container} class="flex justify-center overflow-x-auto">
45
<noscript>
46
- <pre class="rounded-lg border border-gray-200 bg-gray-50 p-4 text-sm dark:border-gray-700 dark:bg-gray-800"><code>{code}</code></pre>
46
+ <pre class="rounded-lg border border-border bg-secondary p-4 text-sm"><code>{code}</code></pre>
47
</noscript>
48
</div>
49
</div>
docs/src/lib/components/MobileNav.svelte
+1
-1
@@ -17,7 +17,7 @@
17
18
<!-- Drawer -->
19
<div
20
- class="fixed inset-y-0 left-0 z-50 w-72 overflow-y-auto border-r border-gray-200 bg-white p-6 lg:hidden dark:border-gray-700 dark:bg-gray-900"
20
+ class="fixed inset-y-0 left-0 z-50 w-72 overflow-y-auto border-r border-border bg-background p-6 lg:hidden"
21
>
22
<div class="mb-6 flex items-center justify-between">
23
<span class="text-lg font-bold text-gray-900 dark:text-white">Portal Docs</span>
docs/src/lib/components/landing/CoreFeaturesGrid.svelte
+4
-7
@@ -64,27 +64,24 @@
64
>
65
<div class="flex h-full flex-col space-y-3">
66
<p
67
- class="text-[11px] font-semibold uppercase tracking-[0.24em]"
68
- style="color: oklch(75% 0.14 195 / 0.8);"
67
+ class="text-[11px] font-semibold uppercase tracking-[0.24em] text-primary/80"
68
>
69
{eyebrow}
70
</p>
71
<h3
73
- class="text-[1.2rem] font-semibold tracking-tight sm:text-[1.32rem] sm:leading-tight"
74
- style="color: var(--foreground);"
72
+ class="text-[1.2rem] font-semibold tracking-tight text-foreground sm:text-[1.32rem] sm:leading-tight"
73
>
74
{title}
75
</h3>
76
<p
79
- class="max-w-[28ch] text-[0.95rem] leading-6"
80
- style="color: var(--text-muted);"
77
+ class="max-w-[28ch] text-[0.95rem] leading-6 text-text-muted"
78
>
79
{description}
80
</p>
81
<div class="mt-auto pt-4">
82
<div
83
class="h-px w-12"
87
- style="background: linear-gradient(to right, oklch(75% 0.14 195 / 0.55), transparent);"
84
+ style="background: var(--gradient-primary-fade);"
85
></div>
86
</div>
87
</div>
docs/src/lib/components/landing/DifferentiatorCarousel.svelte
+4
-7
@@ -226,22 +226,19 @@
226
<div class="relative flex h-full flex-col">
227
<div class="flex items-center gap-4">
228
<span
229
- class="inline-flex rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]"
230
- style="background: oklch(75% 0.14 195 / 0.12); color: var(--neon-cyan);"
229
+ class="inline-flex rounded-full bg-primary/[0.12] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-primary"
230
>
231
Portal
232
</span>
233
</div>
234
<div class="mt-10 space-y-3">
235
<h3
237
- class="max-w-[12ch] text-[1.9rem] font-semibold leading-[0.92] tracking-tight sm:text-[2.2rem]"
238
- style="color: var(--foreground);"
236
+ class="max-w-[12ch] text-[1.9rem] font-semibold leading-[0.92] tracking-tight text-foreground sm:text-[2.2rem]"
237
>
238
{card.title}
239
</h3>
240
<p
243
- class="max-w-[34ch] text-[0.98rem] leading-6 sm:text-[1rem]"
244
- style="color: var(--text-muted);"
241
+ class="max-w-[34ch] text-[0.98rem] leading-6 text-text-muted sm:text-[1rem]"
242
>
243
{card.description}
244
</p>
@@ -249,7 +246,7 @@
246
<div class="mt-auto pt-8">
247
<div
248
class="h-px w-16"
252
- style="background: linear-gradient(to right, oklch(75% 0.14 195 / 0.55), transparent);"
249
+ style="background: var(--gradient-primary-fade);"
250
></div>
251
</div>
252
</div>
docs/src/routes/+layout.svelte
+6
-6
@@ -85,7 +85,7 @@
85
href="https://github.com/gosuda/portal-tunnel"
86
target="_blank"
87
rel="noopener noreferrer"
88
- class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/90 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:text-primary" style="color: var(--foreground);"
88
+ class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/90 text-foreground shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:text-primary"
89
aria-label="View source on GitHub"
90
>
91
<svg height="22" width="22" viewBox="0 0 24 24" fill="currentColor" class="opacity-85 transition-opacity hover:opacity-100">
@@ -113,14 +113,14 @@
113
<footer class="w-full border-t bg-secondary/35">
114
<div class="flex w-full flex-col gap-6 px-6 py-8 sm:px-8 md:flex-row md:items-end md:justify-between lg:px-10">
115
<div class="space-y-1.5">
116
- <a href="{base}/" class="inline-block text-lg font-bold tracking-tight transition-colors hover:text-primary" style="color: var(--foreground);">
116
+ <a href="{base}/" class="inline-block text-lg font-bold tracking-tight text-foreground transition-colors hover:text-primary">
117
PORTAL
118
</a>
119
- <p class="text-sm" style="color: var(--text-muted);">
119
+ <p class="text-sm text-text-muted">
120
Public relay index and localhost tunnel launcher.
121
</p>
122
</div>
123
- <nav aria-label="Footer" class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm md:justify-end" style="color: var(--text-muted);">
123
+ <nav aria-label="Footer" class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-text-muted md:justify-end">
124
<a href="{base}/getting-started" class="transition-colors hover:text-foreground">Docs</a>
125
<a href="https://github.com/gosuda/portal-tunnel" target="_blank" rel="noopener noreferrer" class="transition-colors hover:text-foreground">Source</a>
126
</nav>
@@ -129,7 +129,7 @@
129
{:else}
130
<!-- Doc pages: sidebars + prose -->
131
<div class="mx-auto max-w-[90rem] lg:flex">
132
- <aside class="hidden w-64 shrink-0 border-r border-gray-200 lg:block dark:border-white/8">
132
+ <aside class="hidden w-64 shrink-0 border-r border-border lg:block">
133
<div class="sticky top-[var(--header-h)] h-[calc(100vh-var(--header-h))] overflow-y-auto p-6">
134
<Sidebar />
135
</div>
@@ -144,7 +144,7 @@
144
</div>
145
</main>
146
147
- <aside class="hidden w-56 shrink-0 border-l border-gray-200 xl:block dark:border-white/8">
147
+ <aside class="hidden w-56 shrink-0 border-l border-border xl:block">
148
<div class="sticky top-[var(--header-h)] h-[calc(100vh-var(--header-h))] overflow-y-auto py-8 pr-4">
149
<TableOfContents />
150
</div>