Skip to content

Commit c85ad25

Browse files
cdbartholomewcdbartholomew
committed
fix(ui): improve contrast and readability of small labels
Lift --muted-foreground (oklch L 0.60 → 0.76) and --border (0.33 → 0.39) so secondary text clears WCAG AA contrast on the dark background. Bump opacity-stacked utility classes (text-muted-foreground/40,/50,/60) to /70,/80,/85 in page components so small labels aren't rendered twice- faded, and promote text-xs → text-sm on body-level labels (section headers, card footers, breadcrumbs, id chips, table secondary cells). Compact primitives (badges, buttons, bar chart) keep their sizing.
1 parent e708c1d commit c85ad25

13 files changed

Lines changed: 141 additions & 179 deletions

ui/dist/assets/index-Ud8aUk_I.css renamed to ui/dist/assets/index-BWKRtmhC.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/dist/assets/index-Be5t4Uo-.js‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎ui/dist/assets/index-i9bg09zq.js‎

Lines changed: 27 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636

3737
<!-- Analytics -->
3838
<script async src="https://analytics.hindsight.vectorize.io/script.js" data-website-id="d018abae-77ea-464d-a89d-404b1b305425"></script>
39-
<script type="module" crossorigin src="/assets/index-Be5t4Uo-.js"></script>
40-
<link rel="stylesheet" crossorigin href="/assets/index-Ud8aUk_I.css">
39+
<script type="module" crossorigin src="/assets/index-i9bg09zq.js"></script>
40+
<link rel="stylesheet" crossorigin href="/assets/index-BWKRtmhC.css">
4141
</head>
4242
<body>
4343
<div id="app"></div>

‎ui/src/components/ui/input.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ defineEmits(['update:modelValue'])
1212
:placeholder="placeholder"
1313
@input="$emit('update:modelValue', $event.target.value)"
1414
:class="cn(
15-
'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
15+
'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
1616
$props.class
1717
)"
1818
/>

‎ui/src/components/ui/top-nav.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const router = useRouter()
1515
Agent Memory Benchmark
1616
</button>
1717
<template v-for="(crumb, i) in crumbs" :key="i">
18-
<span class="text-muted-foreground/40 shrink-0">/</span>
18+
<span class="text-muted-foreground/70 shrink-0">/</span>
1919
<button v-if="crumb.to" @click="router.push(crumb.to)"
2020
class="text-muted-foreground hover:text-foreground text-sm transition-colors truncate">
2121
{{ crumb.label }}
@@ -25,7 +25,7 @@ const router = useRouter()
2525
<div class="ml-auto flex items-center gap-4 shrink-0">
2626
<slot name="right" />
2727
<a href="https://github.com/vectorize-io/agent-memory-benchmark" target="_blank" rel="noopener"
28-
class="text-xs text-muted-foreground hover:text-foreground transition-colors">GitHub ↗</a>
28+
class="text-sm text-muted-foreground hover:text-foreground transition-colors">GitHub ↗</a>
2929
</div>
3030
</div>
3131
</nav>

‎ui/src/pages/DatasetDetail.vue‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ function hasCategoryData(local, split) {
309309
{{ catalog.datasets[dataset].task === 'MCQ' ? 'Multiple Choice' : 'Open-ended' }}
310310
</Badge>
311311
<a v-for="link in datasetLinks" :key="link.label" :href="link.url" target="_blank" rel="noopener"
312-
class="text-xs text-primary hover:text-primary/80 transition-colors border border-primary/30 rounded px-2 py-0.5" @click.stop>
312+
class="text-sm text-primary hover:text-primary/80 transition-colors border border-primary/30 rounded px-2 py-0.5" @click.stop>
313313
{{ link.label }} ↗
314314
</a>
315315
</div>
@@ -340,11 +340,11 @@ function hasCategoryData(local, split) {
340340
<!-- Split header -->
341341
<div class="flex items-center justify-between mb-6">
342342
<div>
343-
<p class="text-muted-foreground/60 text-xs">{{ fmtSplitStats(splitStats[split]) }}</p>
343+
<p class="text-muted-foreground/85 text-sm">{{ fmtSplitStats(splitStats[split]) }}</p>
344344
</div>
345345
<div class="flex items-center gap-4">
346346
<!-- View mode toggle — always show if split has any category data (lazy-detected) -->
347-
<div class="flex text-xs border border-border overflow-hidden rounded">
347+
<div class="flex text-sm border border-border overflow-hidden rounded">
348348
<button @click="setViewMode(split, 'overall')"
349349
:class="getViewMode(split) === 'overall' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground'"
350350
class="px-3 py-1.5 transition-colors">Overall</button>
@@ -353,7 +353,7 @@ function hasCategoryData(local, split) {
353353
class="px-3 py-1.5 transition-colors border-l border-border">By Category</button>
354354
</div>
355355
<button @click="router.push(`/dataset/${encodeURIComponent(dataset)}/${encodeURIComponent(split)}`)"
356-
class="text-primary hover:text-primary/80 text-xs transition-colors">Browse →</button>
356+
class="text-primary hover:text-primary/80 text-sm transition-colors">Browse →</button>
357357
</div>
358358
</div>
359359
@@ -363,21 +363,21 @@ function hasCategoryData(local, split) {
363363
<!-- Charts -->
364364
<div v-if="local.length" class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
365365
<Card class="p-4">
366-
<p class="font-display text-xs font-semibold uppercase tracking-wider text-muted-foreground/60 mb-4">Accuracy</p>
366+
<p class="font-display text-sm font-semibold uppercase tracking-wider text-muted-foreground/85 mb-4">Accuracy</p>
367367
<BarChart :rows="chartAccuracy(local).rows" :max="1"
368368
:format="v => (v * 100).toFixed(1) + '%'"
369369
variant="accuracy" />
370370
</Card>
371371
<Card class="p-4">
372-
<p class="font-display text-xs font-semibold uppercase tracking-wider text-muted-foreground/60 mb-1">Recall speed</p>
373-
<p class="text-muted-foreground/40 text-xs mb-4">lower is better</p>
372+
<p class="font-display text-sm font-semibold uppercase tracking-wider text-muted-foreground/85 mb-1">Recall speed</p>
373+
<p class="text-muted-foreground/70 text-sm mb-4">lower is better</p>
374374
<BarChart :rows="chartRecall(local).rows"
375375
:format="v => Math.round(v) + 'ms'"
376376
variant="recall" :lower-better="true" />
377377
</Card>
378378
<Card class="p-4">
379-
<p class="font-display text-xs font-semibold uppercase tracking-wider text-muted-foreground/60 mb-1">Context tokens</p>
380-
<p class="text-muted-foreground/40 text-xs mb-4">lower is better</p>
379+
<p class="font-display text-sm font-semibold uppercase tracking-wider text-muted-foreground/85 mb-1">Context tokens</p>
380+
<p class="text-muted-foreground/70 text-sm mb-4">lower is better</p>
381381
<BarChart :rows="chartTokens(local).rows"
382382
:format="v => v >= 1000 ? (v / 1000).toFixed(1).replace(/\.0$/, '') + 'k' : Math.round(v)"
383383
variant="tokens" :lower-better="true" />
@@ -421,7 +421,7 @@ function hasCategoryData(local, split) {
421421
<TableCell :right="true">{{ (item.ingestion_time_ms != null && item.ingested_docs) ? Math.round(item.ingestion_time_ms / item.ingested_docs) + 'ms' : '—' }}</TableCell>
422422
<TableCell :right="true">{{ item.avg_retrieve_time_ms != null ? Math.round(item.avg_retrieve_time_ms) + 'ms' : '—' }}</TableCell>
423423
<TableCell :right="true">{{ item.avg_context_tokens != null ? Math.round(item.avg_context_tokens).toLocaleString() : '—' }}</TableCell>
424-
<TableCell :right="true" class="text-muted-foreground/40 text-xs">→</TableCell>
424+
<TableCell :right="true" class="text-muted-foreground/70 text-sm">→</TableCell>
425425
</TableRow>
426426
</TableBody>
427427
</UiTable>
@@ -436,12 +436,12 @@ function hasCategoryData(local, split) {
436436
<template v-else>
437437
438438
<div v-for="section in categorySections(local, split)" :key="section.type" class="mb-10">
439-
<p class="font-display text-xs font-semibold uppercase tracking-wider text-muted-foreground/60 mb-4">{{ section.label }}</p>
439+
<p class="font-display text-sm font-semibold uppercase tracking-wider text-muted-foreground/85 mb-4">{{ section.label }}</p>
440440
441441
<!-- Per-category bar charts -->
442442
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mb-4">
443443
<Card v-for="{ cat, rows } in section.charts" :key="cat" class="p-4">
444-
<p class="font-display text-xs font-semibold uppercase tracking-wider text-muted-foreground/60 mb-3">{{ cat }}</p>
444+
<p class="font-display text-sm font-semibold uppercase tracking-wider text-muted-foreground/85 mb-3">{{ cat }}</p>
445445
<BarChart :rows="rows" :max="1"
446446
:format="v => (v * 100).toFixed(1) + '%'"
447447
variant="accuracy" />
@@ -485,15 +485,15 @@ function hasCategoryData(local, split) {
485485
486486
<!-- Scoring note -->
487487
<div v-if="catalog.datasets?.[dataset]?.scoring_note" class="mt-6 mb-2 rounded-md bg-muted/50 px-4 py-3 max-w-3xl">
488-
<p class="text-xs font-medium text-foreground/80 mb-1">How is this scored?</p>
489-
<p class="text-xs text-muted-foreground leading-relaxed">{{ catalog.datasets[dataset].scoring_note }}</p>
488+
<p class="text-sm font-medium text-foreground/80 mb-1">How is this scored?</p>
489+
<p class="text-sm text-muted-foreground leading-relaxed">{{ catalog.datasets[dataset].scoring_note }}</p>
490490
</div>
491491
492492
<!-- Unverified -->
493493
<template v-if="external.length">
494494
<div class="mb-3 mt-8">
495-
<p class="font-display text-xs font-semibold uppercase tracking-wider text-ca mb-1">Unverified</p>
496-
<p class="text-xs text-muted-foreground max-w-2xl leading-relaxed">Sourced from external papers or leaderboards — not independently reproduced here. Scores are <strong class="text-foreground">not directly comparable</strong>. Click a row to view the source.</p>
495+
<p class="font-display text-sm font-semibold uppercase tracking-wider text-ca mb-1">Unverified</p>
496+
<p class="text-sm text-muted-foreground max-w-2xl leading-relaxed">Sourced from external papers or leaderboards — not independently reproduced here. Scores are <strong class="text-foreground">not directly comparable</strong>. Click a row to view the source.</p>
497497
</div>
498498
<Card class="overflow-hidden border-ca/15">
499499
<UiTable>
@@ -514,12 +514,12 @@ function hasCategoryData(local, split) {
514514
<span>{{ providerByKey[item.memory]?.family ?? item.memory }}</span>
515515
<Badge v-if="providerByKey[item.memory]?.variant" variant="secondary">{{ providerByKey[item.memory].variant }}</Badge>
516516
</div>
517-
<div v-if="item.comment" class="text-xs text-muted-foreground/60 mt-0.5">{{ item.comment }}</div>
517+
<div v-if="item.comment" class="text-sm text-muted-foreground/85 mt-0.5">{{ item.comment }}</div>
518518
</TableCell>
519519
<TableCell :right="true" class="font-semibold">
520520
{{ item.accuracy != null ? (item.accuracy * 100).toFixed(1) + '%' : '—' }}
521521
</TableCell>
522-
<TableCell class="text-ca text-xs">
522+
<TableCell class="text-ca text-sm">
523523
<span v-if="item.source_label">{{ item.source_label }} ↗</span>
524524
<span v-else class="text-muted-foreground">View source ↗</span>
525525
</TableCell>

0 commit comments

Comments
 (0)