Style-guide drift roll-up (§3 audit): off-scale font sizes, non-pill badges, lowercase actions, mono buttons, UA-blue link, off-palette banners, raw error text #694

New issue

Closed

opened 2026-09-23 10:32:19 +00:00 by Cordy · 0 comments

Cordy commented

2026-09-23 10:32:19 +00:00

Owner

Found by the #656 QA pass, §3 UI consistency audit (v0.6.247, files + files-bao). These are the smaller contradictions of docs/design/style-guide.md, gathered into one issue so they don't become 20 tickets. The bigger items are filed separately: #691 (dark-theme contrast), #692 (i18n), #693 (dialog canon), #674/#675 (phone), #683 (hold lift), #688 (Active links).

Typography: sizes off the scale (the scale is 10.5/11/11.8/12/12.5/13/14/15; "No new font sizes without a reason"). Measured on visible text:

13.5px: admin kv labels/values and page ledes (.kvk, .kvv, p.hint)
13.6px: "Exit to files"
12.8px: admin hints
11.5px: rotation step labels, departed empty-state sub
13.12px: .sharepath
15.2px: .viewtitle
12.48px: Transfers status pill
20px/23px: admin h2 and metric numbers

These are rem leftovers (the style guide's "Known drift").

Badges (canon: pill 999px, 10.5px, 700, uppercase):

.kvbadge on Overview, Seats and Updates ("On", "Connected", "Licensed", "Idle", "Manual") are 11px, radius 4px, not uppercase.
The Transfers status is a lowercase "done" at 12.48px.
State colours drift: "On" is green on Overview but grey on Encryption → Custody.
"COVERAGE UNKNOWN" is amber uppercase while its siblings are title-case.

Voice / sentence case: inline actions are lowercase: "revoke", "remove", "copy link", "restore", "delete forever" (Shares view, share panel, Deleted files, Active links).

Buttons:

OCM → Servers "Check" and "Allow server" render in the mono font. Mono is for technical values, not buttons.
Updates → "Release notes for v0.6.247" is a UA-default blue underlined link, with no token colour.

Banners and colour: Deleted files → Retention shows a dark brown/amber warning banner (off the --warn tint idiom) with a ⚠ glyph jammed against the text. It also repeats the row's own description.

Tabs: all tab rows use .admtab ✅ (Admin, Shares, Federated). But the "Departed owners 1" count renders red, where the canon says "11px muted suffix".

Inputs:

Share panel role/expiry <select>s are native, with a black border.
Retention "Resolve" and Transfer-ownership "New owner" (#689) are UA-styled inputs.
The name dialog's focus ring is the UA default (#693).

Mono vs sans for technical values:

The Encryption → Recovery "Retained identity" key and the Licensing key render in sans, while the public part next to them is mono.
In the share panel, the grant name "sharer1" and the "Person" badge render in mono, although they are not technical identifiers.

Honest copy:

Transfers shows raw peering: prepare: rpc error: code = NotFound desc = STATUS_UNKNOWN_RECIPIENT to users.
Expired or revoked public links return a bare Go 404 page not found text page, not a styled "This link has expired or was revoked" page.
Users → Seats "Last seen 9 hours ago" is the last sign-in: both users were active minutes earlier. Access → "Signed in now: 1 person" was shown while two sessions were live.
"Active for 1 legacy servers" (plural).
Admin hints use " - " hyphens where "—" is used everywhere else.
Times display in UTC with no label (browser TZ Europe/Zurich; a delete at 12:00 local shows "10:00").
Collabora shows "READ-ONLY — READ-ONLY SPACE" for a read-only share, and the pane button says "Edit in Collabora Online" to a viewer.
The Collabora "Explore the new 26.04" welcome popup appears inside the embedded editor.
Public share pages use a separate dark and amber palette, not the app tokens.

Phone (375px), passing: there is no horizontal overflow, and dialogs become bottom sheets (radius 16/16/0/0, sticky .dlgactions, screenshot 656-phone-dialog-sheet.jpg). But row action targets are 28×28px, under a 44px touch target.

Minor: after switching language back to en without a reload, the sidebar storage meter keeps the previous language ("Stockage : 283 MB sur 2.0 GB").

Screenshots: the 656-admin-* set (§2), 656-theme-*, 692-*, 693-*, 656-phone-dialog-sheet.jpg.

Found by the #656 QA pass, §3 UI consistency audit (v0.6.247, files + files-bao). These are the smaller contradictions of `docs/design/style-guide.md`, gathered into one issue so they don't become 20 tickets. The bigger items are filed separately: #691 (dark-theme contrast), #692 (i18n), #693 (dialog canon), #674/#675 (phone), #683 (hold lift), #688 (Active links). **Typography: sizes off the scale** (the scale is 10.5/11/11.8/12/12.5/13/14/15; "No new font sizes without a reason"). Measured on visible text: - `13.5px`: admin kv labels/values and page ledes (`.kvk`, `.kvv`, `p.hint`) - `13.6px`: "Exit to files" - `12.8px`: admin hints - `11.5px`: rotation step labels, departed empty-state sub - `13.12px`: `.sharepath` - `15.2px`: `.viewtitle` - `12.48px`: Transfers status pill - `20px`/`23px`: admin h2 and metric numbers These are rem leftovers (the style guide's "Known drift"). **Badges** (canon: pill 999px, 10.5px, 700, uppercase): - `.kvbadge` on Overview, Seats and Updates ("On", "Connected", "Licensed", "Idle", "Manual") are 11px, radius 4px, **not uppercase**. - The Transfers status is a lowercase "done" at 12.48px. - State colours drift: "On" is green on Overview but grey on Encryption → Custody. - "COVERAGE UNKNOWN" is amber uppercase while its siblings are title-case. **Voice / sentence case:** inline actions are lowercase: "revoke", "remove", "copy link", "restore", "delete forever" (Shares view, share panel, Deleted files, Active links). **Buttons:** - OCM → Servers "Check" and "Allow server" render in the **mono** font. Mono is for technical values, not buttons. - Updates → "Release notes for v0.6.247" is a UA-default **blue underlined** link, with no token colour. **Banners and colour:** Deleted files → Retention shows a dark brown/amber warning banner (off the `--warn` tint idiom) with a `⚠` glyph jammed against the text. It also repeats the row's own description. **Tabs:** all tab rows use `.admtab` ✅ (Admin, Shares, Federated). But the "Departed owners 1" count renders **red**, where the canon says "11px muted suffix". **Inputs:** - Share panel role/expiry `<select>`s are native, with a black border. - Retention "Resolve" and Transfer-ownership "New owner" (#689) are UA-styled inputs. - The name dialog's focus ring is the UA default (#693). **Mono vs sans for technical values:** - The Encryption → Recovery "Retained identity" key and the Licensing key render in **sans**, while the public part next to them is mono. - In the share panel, the grant name "sharer1" and the "Person" badge render in mono, although they are not technical identifiers. **Honest copy:** - Transfers shows raw `peering: prepare: rpc error: code = NotFound desc = STATUS_UNKNOWN_RECIPIENT` to users. - Expired or revoked public links return a bare Go `404 page not found` text page, not a styled "This link has expired or was revoked" page. - Users → Seats "Last seen 9 hours ago" is the last *sign-in*: both users were active minutes earlier. Access → "Signed in now: 1 person" was shown while two sessions were live. - "Active for 1 legacy **servers**" (plural). - Admin hints use " - " hyphens where "—" is used everywhere else. - Times display in UTC with no label (browser TZ Europe/Zurich; a delete at 12:00 local shows "10:00"). - Collabora shows "READ-ONLY — READ-ONLY SPACE" for a read-only *share*, and the pane button says "Edit in Collabora Online" to a viewer. - The Collabora "Explore the new 26.04" welcome popup appears inside the embedded editor. - Public share pages use a separate dark and amber palette, not the app tokens. **Phone (375px), passing:** there is no horizontal overflow, and dialogs become bottom sheets (radius 16/16/0/0, sticky `.dlgactions`, screenshot `656-phone-dialog-sheet.jpg`). **But** row action targets are 28×28px, under a 44px touch target. **Minor:** after switching language back to en without a reload, the sidebar storage meter keeps the previous language ("Stockage : 283 MB sur 2.0 GB"). **Screenshots:** the `656-admin-*` set (§2), `656-theme-*`, `692-*`, `693-*`, `656-phone-dialog-sheet.jpg`.