Proposal: add a tiny density step to @helex/ui (sign-off requested)
To: Helex-UI owner
From: TEDY / the reference platform-parity work
Status: Awaiting sign-off — no code has been written. This is a shared @helex/ui change, so per the leaned-down convention it needs your explicit go-ahead before implementation, and it will land on its own worktree/branch (not pushed directly).
Based on: docs/accessibility-density-tiny.md (completed audit of Marina/reference-editor vs @helex/ui sizing)
Effort: ~½ day, fully additive.
1. Verdict (already decided — not re-opening this)
A tiny option is warranted, but with two hard constraints:
- It is a new
HelexDensityvalue, NOT aHelexFontSizeoption. A sub-14px global font is WCAG-adverse and is rejected outright. The FontSize axis exists to scale text up for low-vision users; reference-editor itself never drops global font below 14px. - Its only job is denser data-grade tables.
compactalready covers ordinary screens — it is in fact already denser than reference-editor’s default mode (control 24px vs 32px, table cell padding 8/8 vs 11.2/11.2). The one place the reference platform is denser than anything@helex/uioffers today is its small-table mode (~27–32px rows), which shrinks both cell padding and in-table font — something no current density does. For large concept tables (the reference platform precedent is a 37,504-row CodeSystem) a denser step buys roughly 15–30% more visible rows. That is the narrow, real gaptinyfills.
Everything below is the concrete plan for that decision.
2. WCAG rationale — why density, not font-size
- The
HelexFontSizeaxis (normal14 /large18 /extraLarge26) is an accessibility scale-up control. Adding a sub-14 value to it inverts its purpose and pushes global body text below the readable floor — WCAG-adverse and off-precedent. tinykeeps globalfontSizeat 14 and only compresses layout spacing app-wide. Font shrinks inside tables only (cellFontSizeSM: 13), mirroring the reference platform’s--*--smtable variables — dense grids where the user has opted in, not global body copy.- Because it is opt-in per user (Accessibility modal) and scoped to tables, it does not degrade the default experience or the low-vision scale-up path.
3. Proposed shape (tokens)
New HelexDensity value 'tiny', positioned below compact. Global font stays 14.
DENSITY_MAPS.tiny = { gapXs: 2, gapSm: 4, gapMd: 6, gapLg: 6, gapXl: 12, rowPadding: 6 }
antdComponentSizeFor: tiny → 'small', plus antdcompactAlgorithm(same algorithmcompactalready uses).buildAntThemetinyoverrides:token.controlHeight: 24,token.controlHeightSM: 20components.Table: { cellPaddingBlock: 4, cellPaddingBlockSM: 4, cellPaddingInline: 8, cellPaddingInlineSM: 8, cellFontSizeSM: 13 }components.Card: { bodyPadding: 8 }- Global
token.fontSizestays 14 (unchanged).
4. Edit sites (all additive, all in modules/core/frontend)
| File | Change |
|---|---|
libs/ui/src/lib/themes/themes.ts | Add 'tiny' to the HelexDensity union (line 375); add the DENSITY_MAPS.tiny entry (line ~387); extend antdComponentSizeFor to map tiny → 'small' (line ~402); add the tiny branch of overrides in buildAntTheme (line ~462). |
libs/ui/src/lib/settings/AccessibilityModal.tsx | Add a fourth Compactness radio <Radio value="tiny"> (after line 124) using a new i18n key helex.settings.access.tiny. |
libs/ui/src/lib/themes/themes.test.ts | Extend the density-aware buildAntTheme suite (line 64): assert tiny applies compactAlgorithm, sets the Table cell-padding + cellFontSizeSM overrides, and keeps token.fontSize === 14. |
| i18n (EN + ET + RU) | New key helex.settings.access.tiny in all three locales, with _meta.needsReview on ET/RU per the i18n process. |
Notes for the implementer (post-sign-off):
DENSITY_MAPSalready feeds both the antd token projection (buildAntTheme) and the CSS-var projection (buildHelexCssVars→--helex-gap-*/--helex-row-padding), andthemes.test.tsasserts the two can’t drift — so adding a map entry keeps both surfaces in sync for free.defaultdensity must remain byte-identical to today (the test at line 65 guards this);tinyis a pure addition.
5. Cheaper scoped alternative (no shared change)
If you’d rather not take a shared @helex/ui preset for this: apply antd size="small" plus a scoped cellFontSize/cellFontSizeSM override only on the specific TEDY concept-table components, via a local ConfigProvider theme={{ components: { Table: {...} } }} wrapper around those tables. This delivers the same denser-table win for the one place that needs it, avoids a new global density value and the modal/i18n surface area, and keeps @helex/ui untouched. Trade-off: it’s TEDY-local, so any other module wanting the same density later re-implements it (or we promote it to tiny then anyway).
6. What I’m asking for
Please sign off on one of:
- (A) Shared
tinydensity — the plan in §3–§4. I’ll implement it on a dedicated worktree/branch and open a PR for review; nothing merges without it. - (B) Scoped alternative — §5, no
@helex/uichange. - (C) Neither / discuss — if you see a reason to reshape the tokens or reject the gap.
Until you pick, I will not touch @helex/ui.