jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): bump all text below 12px to 12px floor and promote tertiary-on-body to secondary

Browse Source 
Brand guidelines (docs/brand/magnotia-brand-guidelines.md §4) say "Never go
below 12px for any text" and "tertiary text must be ≥18px bold or ≥24px
regular". Audit found 246 sub-12px className sites and 166 cases of
text-text-tertiary paired with body sizes.

Bumped text-[9/10/11px] → text-[12px] across 26 .svelte files in src/lib
and src/routes. Promoted text-text-tertiary → text-text-secondary at body
sizes (12-14px) where context allowed; left placeholder pseudo-states,
ternary-conditional inactive states, and line-through "done" states alone
(8 residual pairings, all decorative).

Affects neurodivergent users on 1366×768 budget hardware most directly.
svelte-check: 0 errors, 0 warnings.
This commit is contained in:
Jake
2026-05-07 11:18:10 +01:00
parent 6da15d1ac8
commit ca3a55320b
26 changed files with 257 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/Sidebar.svelte
View File

@@ -63,7 +63,7 @@
</div>
{#if !collapsed}
<p class="text-[10px] text-text-tertiary px-5 mt-1.5 tracking-[0.12em] uppercase">Think out loud</p>
<p class="text-[12px] text-text-secondary px-5 mt-1.5 tracking-[0.12em] uppercase">Think out loud</p>
<!-- LLM status chip — hidden when aiTier === off, otherwise reflects
disconnected / warming / ready / generating / error state live. -->
<div class="px-5 mt-2">
@@ -121,14 +121,14 @@
{#if !collapsed}
<span>{item.label}</span>
{#if item.id === "tasks" && taskCount > 0}
<span class="ml-auto text-[10px] px-1.5 py-0.5 rounded-full bg-accent/15 text-accent font-medium">
<span class="ml-auto text-[12px] px-1.5 py-0.5 rounded-full bg-accent/15 text-accent font-medium">
{taskCount}
</span>
{/if}
{:else}
<!-- Tooltip on hover/focus for collapsed mode -->
<span class="absolute left-full ml-2 px-2 py-1 rounded-md bg-bg-elevated border border-border-subtle
text-[11px] text-text whitespace-nowrap opacity-0 pointer-events-none
text-[12px] text-text whitespace-nowrap opacity-0 pointer-events-none
group-hover:opacity-100 group-focus-visible:opacity-100 z-50 shadow-lg"
style="transition: opacity var(--duration-ui)"
role="tooltip"
@@ -159,9 +159,9 @@
class:animate-pulse-soft={page.recording}
style="background: {page.statusColor}"
></span>
<span class="text-[11px] text-text-secondary">{page.status}</span>
<span class="text-[12px] text-text-secondary">{page.status}</span>
</div>
<p class="text-[10px] text-text-tertiary mt-1.5">{settings.formatMode} · v0.1</p>
<p class="text-[12px] text-text-secondary mt-1.5">{settings.formatMode} · v0.1</p>
</div>
{:else}
<!-- Collapsed: status dot only -->