Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

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:

  1. It is a new HelexDensity value, NOT a HelexFontSize option. 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.
  2. Its only job is denser data-grade tables. compact already 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/ui offers 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 gap tiny fills.

Everything below is the concrete plan for that decision.

2. WCAG rationale — why density, not font-size

  • The HelexFontSize axis (normal 14 / large 18 / extraLarge 26) 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.
  • tiny keeps global fontSize at 14 and only compresses layout spacing app-wide. Font shrinks inside tables only (cellFontSizeSM: 13), mirroring the reference platform’s --*--sm table 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 antd compactAlgorithm (same algorithm compact already uses).
  • buildAntTheme tiny overrides:
    • token.controlHeight: 24, token.controlHeightSM: 20
    • components.Table: { cellPaddingBlock: 4, cellPaddingBlockSM: 4, cellPaddingInline: 8, cellPaddingInlineSM: 8, cellFontSizeSM: 13 }
    • components.Card: { bodyPadding: 8 }
    • Global token.fontSize stays 14 (unchanged).

4. Edit sites (all additive, all in modules/core/frontend)

FileChange
libs/ui/src/lib/themes/themes.tsAdd '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.tsxAdd 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.tsExtend 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_MAPS already feeds both the antd token projection (buildAntTheme) and the CSS-var projection (buildHelexCssVars--helex-gap-* / --helex-row-padding), and themes.test.ts asserts the two can’t drift — so adding a map entry keeps both surfaces in sync for free.
  • default density must remain byte-identical to today (the test at line 65 guards this); tiny is 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 tiny density — 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/ui change.
  • (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.