Skip to content

Commit 40279f1

Browse files
jaysin586claude
jaysin586
and
claude
committed
fix(docs): convert all examples to dark mode with semantic tokens
Replace hardcoded light-mode colors (bg-white, text-gray-900, border-gray-200, bg-indigo-50, etc.) with docs-kit semantic tokens (bg-card, text-foreground, border-border, bg-brand-500/5, etc.) across all three example components: - BasicChat: controls, stats, chat viewport, messages, input - StreamingChat: metrics, controls, how-it-works callout, stats, chat viewport, messages, markdown prose - HistoryLoading: info bar, stats, controls, chat viewport, messages All examples now respect dark/light mode automatically. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent fa685de commit 40279f1

3 files changed

Lines changed: 143 additions & 142 deletions

File tree

‎docs/src/lib/examples/BasicChat.svelte‎

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@
4949
5050
inputText = ''
5151
52-
// Simulate assistant response
5352
setTimeout(
5453
() => {
5554
const response =
@@ -90,26 +89,26 @@
9089
<div class="mb-4 flex items-center gap-3">
9190
<button
9291
onclick={addBulkMessages}
93-
class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50"
92+
class="border-border bg-card text-foreground hover:bg-muted rounded-lg border px-4 py-2 text-sm font-medium shadow-sm transition-colors"
9493
>
9594
Add 100 messages
9695
</button>
9796
<button
9897
onclick={() => chat?.scrollToBottom({ smooth: true })}
99-
class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-indigo-700"
98+
class="bg-brand-600 hover:bg-brand-700 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors"
10099
>
101100
Scroll to bottom
102101
</button>
103-
<div class="ml-auto flex items-center gap-2 text-sm text-gray-500">
102+
<div class="text-muted-foreground ml-auto flex items-center gap-2 text-sm">
104103
<span class="font-mono">{messages.length}</span> messages
105-
<span class="mx-1 text-gray-300">|</span>
104+
<span class="text-border mx-1">|</span>
106105
{#if isFollowing}
107-
<span class="flex items-center gap-1 text-green-600">
106+
<span class="flex items-center gap-1 text-green-600 dark:text-green-400">
108107
<span class="inline-block h-2 w-2 rounded-full bg-green-500"></span>
109108
Following
110109
</span>
111110
{:else}
112-
<span class="flex items-center gap-1 text-amber-600">
111+
<span class="flex items-center gap-1 text-amber-600 dark:text-amber-400">
113112
<span class="inline-block h-2 w-2 rounded-full bg-amber-500"></span>
114113
Scrolled away
115114
</span>
@@ -119,57 +118,57 @@
119118

120119
<!-- Virtualization Stats -->
121120
{#if debugInfo}
122-
<div class="mb-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
123-
<h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
121+
<div class="border-border bg-card mb-4 rounded-xl border p-4 shadow-sm">
122+
<h3 class="text-muted-foreground mb-3 text-xs font-semibold tracking-wide uppercase">
124123
Virtualization Stats
125124
</h3>
126125
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
127-
<div class="rounded-lg bg-gray-50 p-2.5">
128-
<div class="text-xs text-gray-400">Total</div>
129-
<div class="font-mono text-lg font-semibold text-gray-900">
126+
<div class="bg-muted/50 rounded-lg p-2.5">
127+
<div class="text-muted-foreground text-xs">Total</div>
128+
<div class="text-foreground font-mono text-lg font-semibold">
130129
{debugInfo.totalMessages}
131130
</div>
132131
</div>
133-
<div class="rounded-lg bg-indigo-50 p-2.5">
134-
<div class="text-xs text-indigo-400">In DOM</div>
135-
<div class="font-mono text-lg font-semibold text-indigo-700">
132+
<div class="bg-brand-500/10 rounded-lg p-2.5">
133+
<div class="text-brand-500 text-xs">In DOM</div>
134+
<div class="text-brand-600 dark:text-brand-400 font-mono text-lg font-semibold">
136135
{debugInfo.renderedCount}
137136
</div>
138137
</div>
139-
<div class="rounded-lg bg-gray-50 p-2.5">
140-
<div class="text-xs text-gray-400">Measured</div>
141-
<div class="font-mono text-lg font-semibold text-gray-900">
138+
<div class="bg-muted/50 rounded-lg p-2.5">
139+
<div class="text-muted-foreground text-xs">Measured</div>
140+
<div class="text-foreground font-mono text-lg font-semibold">
142141
{debugInfo.measuredCount}
143142
</div>
144143
</div>
145-
<div class="rounded-lg bg-gray-50 p-2.5">
146-
<div class="text-xs text-gray-400">Visible Range</div>
147-
<div class="font-mono text-sm font-semibold text-gray-900">
144+
<div class="bg-muted/50 rounded-lg p-2.5">
145+
<div class="text-muted-foreground text-xs">Visible Range</div>
146+
<div class="text-foreground font-mono text-sm font-semibold">
148147
{debugInfo.startIndex}–{debugInfo.endIndex}
149148
</div>
150149
</div>
151-
<div class="rounded-lg bg-gray-50 p-2.5">
152-
<div class="text-xs text-gray-400">Content Height</div>
153-
<div class="font-mono text-sm font-semibold text-gray-900">
150+
<div class="bg-muted/50 rounded-lg p-2.5">
151+
<div class="text-muted-foreground text-xs">Content Height</div>
152+
<div class="text-foreground font-mono text-sm font-semibold">
154153
{Math.round(debugInfo.totalHeight)}px
155154
</div>
156155
</div>
157156
<div
158-
class="rounded-lg {debugInfo.isFollowingBottom
159-
? 'bg-green-50'
160-
: 'bg-amber-50'} p-2.5"
157+
class="rounded-lg p-2.5 {debugInfo.isFollowingBottom
158+
? 'bg-green-500/10'
159+
: 'bg-amber-500/10'}"
161160
>
162161
<div
163162
class="text-xs {debugInfo.isFollowingBottom
164-
? 'text-green-500'
165-
: 'text-amber-500'}"
163+
? 'text-green-600 dark:text-green-400'
164+
: 'text-amber-600 dark:text-amber-400'}"
166165
>
167166
Scroll
168167
</div>
169168
<div
170169
class="font-mono text-sm font-semibold {debugInfo.isFollowingBottom
171-
? 'text-green-700'
172-
: 'text-amber-700'}"
170+
? 'text-green-700 dark:text-green-300'
171+
: 'text-amber-700 dark:text-amber-300'}"
173172
>
174173
{debugInfo.isFollowingBottom
175174
? 'Following'
@@ -181,7 +180,7 @@
181180
{/if}
182181

183182
<!-- Chat viewport -->
184-
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
183+
<div class="border-border bg-card overflow-hidden rounded-xl border shadow-sm">
185184
<SvelteVirtualChat
186185
bind:this={chat}
187186
{messages}
@@ -197,23 +196,23 @@
197196
>
198197
{#snippet renderMessage(message: Message)}
199198
<div
200-
class="border-b border-gray-100 px-5 py-4 {message.role === 'user'
201-
? 'bg-indigo-50/50'
202-
: 'bg-white'}"
199+
class="border-border border-b px-5 py-4 {message.role === 'user'
200+
? 'bg-brand-500/5'
201+
: ''}"
203202
>
204203
<div class="mb-1 flex items-center gap-2">
205204
<span
206205
class="text-xs font-semibold {message.role === 'user'
207-
? 'text-indigo-600'
208-
: 'text-gray-500'}"
206+
? 'text-brand-600 dark:text-brand-400'
207+
: 'text-muted-foreground'}"
209208
>
210209
{message.role === 'user' ? 'You' : 'Assistant'}
211210
</span>
212-
<span class="text-xs text-gray-400">
211+
<span class="text-muted-foreground text-xs">
213212
{formatTime(message.timestamp)}
214213
</span>
215214
</div>
216-
<div class="text-sm leading-relaxed text-gray-800">
215+
<div class="text-foreground text-sm leading-relaxed">
217216
{message.content}
218217
</div>
219218
</div>
@@ -232,11 +231,11 @@
232231
<input
233232
bind:value={inputText}
234233
placeholder="Type a message..."
235-
class="flex-1 rounded-lg border border-gray-300 px-4 py-2.5 text-sm shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
234+
class="border-border bg-card text-foreground focus:border-brand-500 focus:ring-brand-500 flex-1 rounded-lg border px-4 py-2.5 text-sm shadow-sm focus:ring-1 focus:outline-none"
236235
/>
237236
<button
238237
type="submit"
239-
class="rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-indigo-700"
238+
class="bg-brand-600 hover:bg-brand-700 rounded-lg px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors"
240239
>
241240
Send
242241
</button>

‎docs/src/lib/examples/HistoryLoading.svelte‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -81,76 +81,76 @@
8181

8282
<div class="mx-auto w-full max-w-4xl">
8383
<!-- Info bar -->
84-
<div
85-
class="mb-4 flex items-center gap-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
86-
>
84+
<div class="border-border bg-card mb-4 flex items-center gap-4 rounded-xl border p-4 shadow-sm">
8785
<div>
88-
<div class="text-xs font-medium uppercase text-gray-400">Messages</div>
89-
<div class="font-mono text-lg font-semibold text-gray-900">{messages.length}</div>
86+
<div class="text-muted-foreground text-xs font-medium uppercase">Messages</div>
87+
<div class="text-foreground font-mono text-lg font-semibold">{messages.length}</div>
9088
</div>
9189
<div>
92-
<div class="text-xs font-medium uppercase text-gray-400">Oldest Loaded</div>
93-
<div class="font-mono text-lg font-semibold text-gray-900">#{oldestLoadedId}</div>
90+
<div class="text-muted-foreground text-xs font-medium uppercase">Oldest Loaded</div>
91+
<div class="text-foreground font-mono text-lg font-semibold">#{oldestLoadedId}</div>
9492
</div>
9593
<div>
96-
<div class="text-xs font-medium uppercase text-gray-400">History Loads</div>
97-
<div class="font-mono text-lg font-semibold text-gray-900">{loadCount}</div>
94+
<div class="text-muted-foreground text-xs font-medium uppercase">History Loads</div>
95+
<div class="text-foreground font-mono text-lg font-semibold">{loadCount}</div>
9896
</div>
9997
<div class="ml-auto">
10098
{#if isLoadingHistory}
101-
<span class="flex items-center gap-1.5 text-sm font-medium text-indigo-600">
102-
<span class="inline-block h-2 w-2 animate-pulse rounded-full bg-indigo-500"
99+
<span
100+
class="text-brand-600 dark:text-brand-400 flex items-center gap-1.5 text-sm font-medium"
101+
>
102+
<span class="bg-brand-500 inline-block h-2 w-2 animate-pulse rounded-full"
103103
></span>
104104
Loading history...
105105
</span>
106106
{:else if !hasMoreHistory}
107-
<span class="text-sm text-gray-400">All history loaded</span>
107+
<span class="text-muted-foreground text-sm">All history loaded</span>
108108
{:else}
109-
<span class="text-sm text-gray-500">Scroll up to load more</span>
109+
<span class="text-muted-foreground text-sm">Scroll up to load more</span>
110110
{/if}
111111
</div>
112112
</div>
113113

114114
<!-- Virtualization Stats -->
115115
{#if debugInfo}
116-
<div class="mb-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
117-
<h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
116+
<div class="border-border bg-card mb-4 rounded-xl border p-4 shadow-sm">
117+
<h3 class="text-muted-foreground mb-3 text-xs font-semibold tracking-wide uppercase">
118118
Virtualization Stats
119119
</h3>
120120
<div class="grid grid-cols-3 gap-3 sm:grid-cols-6">
121-
<div class="rounded-lg bg-gray-50 p-2.5">
122-
<div class="text-xs text-gray-400">Total</div>
123-
<div class="font-mono text-lg font-semibold text-gray-900">
121+
<div class="bg-muted/50 rounded-lg p-2.5">
122+
<div class="text-muted-foreground text-xs">Total</div>
123+
<div class="text-foreground font-mono text-lg font-semibold">
124124
{debugInfo.totalMessages}
125125
</div>
126126
</div>
127-
<div class="rounded-lg bg-indigo-50 p-2.5">
128-
<div class="text-xs text-indigo-400">In DOM</div>
129-
<div class="font-mono text-lg font-semibold text-indigo-700">
127+
<div class="bg-brand-500/10 rounded-lg p-2.5">
128+
<div class="text-brand-500 text-xs">In DOM</div>
129+
<div class="text-brand-600 dark:text-brand-400 font-mono text-lg font-semibold">
130130
{debugInfo.renderedCount}
131131
</div>
132132
</div>
133-
<div class="rounded-lg bg-gray-50 p-2.5">
134-
<div class="text-xs text-gray-400">Measured</div>
135-
<div class="font-mono text-lg font-semibold text-gray-900">
133+
<div class="bg-muted/50 rounded-lg p-2.5">
134+
<div class="text-muted-foreground text-xs">Measured</div>
135+
<div class="text-foreground font-mono text-lg font-semibold">
136136
{debugInfo.measuredCount}
137137
</div>
138138
</div>
139-
<div class="rounded-lg bg-gray-50 p-2.5">
140-
<div class="text-xs text-gray-400">Range</div>
141-
<div class="font-mono text-sm font-semibold text-gray-900">
139+
<div class="bg-muted/50 rounded-lg p-2.5">
140+
<div class="text-muted-foreground text-xs">Range</div>
141+
<div class="text-foreground font-mono text-sm font-semibold">
142142
{debugInfo.startIndex}–{debugInfo.endIndex}
143143
</div>
144144
</div>
145-
<div class="rounded-lg bg-gray-50 p-2.5">
146-
<div class="text-xs text-gray-400">Height</div>
147-
<div class="font-mono text-sm font-semibold text-gray-900">
145+
<div class="bg-muted/50 rounded-lg p-2.5">
146+
<div class="text-muted-foreground text-xs">Height</div>
147+
<div class="text-foreground font-mono text-sm font-semibold">
148148
{Math.round(debugInfo.totalHeight)}px
149149
</div>
150150
</div>
151-
<div class="rounded-lg bg-gray-50 p-2.5">
152-
<div class="text-xs text-gray-400">Scroll</div>
153-
<div class="font-mono text-sm font-semibold text-gray-900">
151+
<div class="bg-muted/50 rounded-lg p-2.5">
152+
<div class="text-muted-foreground text-xs">Scroll</div>
153+
<div class="text-foreground font-mono text-sm font-semibold">
154154
{Math.round(debugInfo.scrollTop)}px
155155
</div>
156156
</div>
@@ -162,21 +162,21 @@
162162
<div class="mb-4 flex items-center gap-3">
163163
<button
164164
onclick={() => chat?.scrollToBottom({ smooth: true })}
165-
class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-indigo-700"
165+
class="bg-brand-600 hover:bg-brand-700 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors"
166166
>
167167
Scroll to bottom
168168
</button>
169169
<button
170170
onclick={loadOlderMessages}
171171
disabled={isLoadingHistory || !hasMoreHistory}
172-
class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 disabled:opacity-50"
172+
class="border-border bg-card text-foreground hover:bg-muted rounded-lg border px-4 py-2 text-sm font-medium shadow-sm transition-colors disabled:opacity-50"
173173
>
174174
Load history manually
175175
</button>
176176
</div>
177177

178178
<!-- Chat viewport -->
179-
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
179+
<div class="border-border bg-card overflow-hidden rounded-xl border shadow-sm">
180180
<SvelteVirtualChat
181181
bind:this={chat}
182182
{messages}
@@ -192,26 +192,26 @@
192192
>
193193
{#snippet renderMessage(message: Message)}
194194
<div
195-
class="border-b border-gray-100 px-5 py-3 {message.role === 'user'
196-
? 'bg-indigo-50/50'
197-
: 'bg-white'}"
195+
class="border-border border-b px-5 py-3 {message.role === 'user'
196+
? 'bg-brand-500/5'
197+
: ''}"
198198
>
199199
<div class="mb-1 flex items-center gap-2">
200200
<span
201201
class="text-xs font-semibold {message.role === 'user'
202-
? 'text-indigo-600'
203-
: 'text-gray-500'}"
202+
? 'text-brand-600 dark:text-brand-400'
203+
: 'text-muted-foreground'}"
204204
>
205205
{message.role === 'user' ? 'You' : 'Assistant'}
206206
</span>
207-
<span class="text-xs text-gray-400">
207+
<span class="text-muted-foreground text-xs">
208208
{formatTime(message.timestamp)}
209209
</span>
210-
<span class="font-mono text-xs text-gray-300">
210+
<span class="text-muted-foreground/50 font-mono text-xs">
211211
#{message.id}
212212
</span>
213213
</div>
214-
<div class="text-sm leading-relaxed text-gray-800">
214+
<div class="text-foreground text-sm leading-relaxed">
215215
{message.content}
216216
</div>
217217
</div>

0 commit comments

Comments
 (0)