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

16
src/lib/components/ImplementationRulesEditor.svelte
View File

@@ -122,13 +122,13 @@
<div class="space-y-5">
<div>
<p class="text-[11px] text-text-tertiary mb-4">
<p class="text-[12px] text-text-secondary mb-4">
Build simple if-then rules. They respect Mute for now in Nudges, and everything stays local.
</p>
<div class="rounded-lg border border-border-subtle bg-bg-input p-4">
<div class="grid grid-cols-1 md:grid-cols-[120px_1fr] gap-3 items-start">
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider pt-2">If</p>
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider pt-2">If</p>
<div class="flex flex-wrap gap-2">
<select
class="bg-bg border border-border rounded-lg px-3 py-2 text-[12px] text-text focus:border-accent"
@@ -147,7 +147,7 @@
{/if}
</div>
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider pt-2">Then</p>
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider pt-2">Then</p>
<div class="space-y-3">
<div class="flex flex-col gap-2">
<Toggle
@@ -188,7 +188,7 @@
/>
<div>
<label for="rule-speak-line" class="block text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">
<label for="rule-speak-line" class="block text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">
Speak aloud
</label>
<input
@@ -204,7 +204,7 @@
</div>
{#if error}
<p class="text-[11px] text-danger mt-3">{error}</p>
<p class="text-[12px] text-danger mt-3">{error}</p>
{/if}
<div class="flex justify-end mt-4">
@@ -224,11 +224,11 @@
</div>
<div>
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Saved rules</p>
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Saved rules</p>
{#if loading}
<p class="text-[11px] text-text-tertiary">Loading…</p>
<p class="text-[12px] text-text-secondary">Loading…</p>
{:else if implementationRules.length === 0}
<p class="text-[11px] text-text-tertiary italic">No rules yet.</p>
<p class="text-[12px] text-text-secondary italic">No rules yet.</p>
{:else}
<div class="space-y-2">
{#each implementationRules as rule (rule.id)}