Skip to content

feat(M1): Simple Mode for real — 16px base, caption floor, 48px touch targets #601

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Victor "David" Medina (Victor-David-Medina) merged 1 commit into from
Jun 28, 2026
+37 −2
Merged

feat(M1): Simple Mode for real — 16px base, caption floor, 48px touch targets #601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1155,6 +1155,34 @@ html[data-density="compact"] main .py-2\.5 { padding-top: 0.375rem; padding-bott
display: none;
}

/* ------------------------------------------------------------
S/M1 (2026-06-28): the calm-skin rules previously documented in
SimpleModeLayer as "PLANNED, not implemented" now land for Simple
Mode — a 16px reading base, a sub-12px caption floor, and 48px
minimum touch targets (WCAG 2.5.5). Opt any dense control out with
[data-simple-compact]. Measured (not prose) via the
body[data-simple-mode="on"] marker SimpleModeLayer sets.
------------------------------------------------------------ */
.simple-mode {
font-size: 16px; /* 16px reading base on the calm owner surface */
}

/* Caption legibility floor — nothing microscopic on a phone. Raises
only the genuinely-tiny utilities; leaves text-sm/xs layouts intact. */
.simple-mode .text-\[10px\],
.simple-mode .text-\[11px\] {
font-size: 12px;
}

/* 48px minimum touch targets on the primary interactive controls.
[data-simple-compact] is the explicit escape for chip/icon rows. */
.simple-mode :where(button, a[role="button"], [role="tab"], select):not([data-simple-compact]) {
min-height: 48px;
}
.simple-mode :where(button, a[role="button"]):not([data-simple-compact]) {
min-width: 48px;
}

/* ============================================================
DEVELOPER-CHROME GATE (DevChromeLayer + lib/dev-chrome.ts)
------------------------------------------------------------
Expand Down
11 changes: 9 additions & 2 deletions components/layout/SimpleModeLayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,14 @@ import { isSimpleMode, simpleModeBodyClass } from "@/lib/simple-mode";
* shell layout) and the api/admin settings tabs (via filterSettingsTabs)
* - `.simple-mode .technical-term` spans are display:none -- inline
* jargon gating
* - S/M1 (2026-06-28): a 16px reading base, a sub-12px caption floor,
* and 48px minimum touch targets (WCAG 2.5.5); opt a dense control
* out with [data-simple-compact]. The <body> carries
* data-simple-mode="on" as the measurable (Playwright-assertable) marker.
*
* PLANNED (not yet implemented -- do NOT claim these until the CSS lands):
* base text >= 16px, max-3-primary-actions, 48px touch targets.
* COMPONENT CONVENTION (not CSS): cap a screen to <=2 emphasized primary
* actions -- the "one decision per screen" north star, landed structurally
* in the nav/focus refresh (M3/M4), not here.
*
* Data source: tenants.simple_mode_enabled, the same flag SettingsClient
* reads (via lib/simple-mode isSimpleMode) and SimpleModeToggle writes.
Expand Down Expand Up @@ -90,8 +95,10 @@ export default function SimpleModeLayer({ enabled, children }: SimpleModeLayerPr
const cls = simpleModeBodyClass(true); // "simple-mode"
if (active) {
document.body.classList.add(cls);
document.body.setAttribute("data-simple-mode", "on");
} else {
document.body.classList.remove(cls);
document.body.removeAttribute("data-simple-mode");
}
return () => {
// On unmount, leave the class in place if active so SSR/CSR stay
Expand Down