Skip to content

Adopt the M3 type scale on self-hosted Roboto Flex#109

Closed
danielchalmers wants to merge 1 commit into
mainfrom
claude/md3-typography
Closed

Adopt the M3 type scale on self-hosted Roboto Flex#109
danielchalmers wants to merge 1 commit into
mainfrom
claude/md3-typography

Conversation

@danielchalmers

Copy link
Copy Markdown
Owner

Summary

Closes out the typography item of the MD3E makeover:

  • Self-hosted Roboto Flex: the variable font (weight axis 100-1000) ships as latin + latin-ext woff2 subsets, 57KB total, declared with proper unicode-range so other scripts fall back to system Roboto. The app's text no longer depends on whatever the WebView provides.
  • Full M3 type scale in the theme: display (H1-H3), headline (H4-H6), title (Subtitle1/2), body (Body1/2), and label (Button/Caption/Overline) roles with M3 sizes, weights, line heights, and letter spacing, replacing MudBlazor's stock M2 scale. Buttons and labels move to 500 weight with label-large tracking; body text gets the M3 tracking values.
  • Removed the now-redundant dialog headline CSS patch, since h6 natively renders as headline-small (24px regular). The app bar title-large override stays, since that's a deliberate role remap for toolbars.
  • Caption keeps its intentional line-height 1 for the compact calendar and chart labels.

Test plan

  • dotnet test -f net10.0 (236 passed, including the palette parity suite against the restructured theme builder)
  • Verified on the API 35 emulator via Chrome DevTools Protocol that document.fonts.check('16px "Roboto Flex"') is true, the computed body font stack leads with Roboto Flex, and body-medium metrics (14px, 1.43 line height, 0.25px tracking) plus 500-weight labels are applied.
  • Before/after screenshots (Home light/dark, Settings light) incoming below.

The app previously leaned on the WebView's system Roboto with MudBlazor's stock M2 type settings and a couple of ad hoc CSS size patches. The theme now defines the full M3 scale (display, headline, title, body, and label roles mapped onto MudBlazor's typography slots) and ships the Roboto Flex variable font as latin and latin-ext woff2 subsets totaling 57KB, so typography no longer depends on platform fonts. The dialog headline CSS patch is gone because h6 now is headline-small.
@danielchalmers

Copy link
Copy Markdown
Owner Author

Not necessary since we only deploy to Android which has Roboto

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant