Skip to content

Add multi-typeface typography#1061

Merged
Pante merged 4 commits into
mainfrom
feature/typography-tokens
Jun 18, 2026
Merged

Add multi-typeface typography#1061
Pante merged 4 commits into
mainfrom
feature/typography-tokens

Conversation

@Pante

@Pante Pante commented Jun 18, 2026

Copy link
Copy Markdown
Member

Describe the changes

Adds support for multiple typefaces.

  • Splits FTypography into two co-equal FTypefaces, body and display, each carrying the full text scale, so
    prominent text such as headings and titles can use a different typeface from body and UI text.
  • Adds FTypeface (a single typeface's text scale) and FTypeface.fontFamilyFallback.
  • Consolidates the typography theme extension into a single FScalableExtension, shared by both FTypography and
    FTypeface.
  • Updates every widget, example, and doc to the new typography.body.* / typography.display.* token paths.
  • Reworks the forui theme CLI scaffold to emit _typography / _display / _body (no generated typography
    extension).
  • Removes stale fix_data migrations (e.g. FStyle.hapticFeedback, breadcrumb, tile/item groups).

Breaking

  • typography.<token> → typography.body.<token> (e.g. typography.sm → typography.body.sm).
  • FTypographyExtension → FScalableExtension.

Checklist

  • I have read the CONTRIBUTING.md.
  • I have included the relevant unit/golden tests.
  • I have included the relevant samples.
  • I have updated the documentation accordingly.
  • I have added the required flutters_hook for widget controllers.
  • I have updated the CHANGELOG.md if necessary.

🤖 Generated with Claude Code

@Pante @claude
Add multi-typeface typography
7e6a890 
Split FTypography into two co-equal FTypefaces, body and display, each
carrying the full text scale, so prominent text such as headings and
titles can use a different typeface from body and UI text. Consolidate
the typography theme extension into a single FScalableExtension shared
by FTypography and FTypeface.

Update all widgets, examples, and docs to the typography.body/display
token paths, rework the theme CLI scaffold (_typography/_display/_body,
no generated extension), and remove stale fix_data migrations.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings June 18, 2026 15:32
Copilot AI reviewed Jun 18, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates Forui’s theming system to support multi-typeface typography by introducing FTypeface and restructuring
FTypography into semantic display and body scales, then migrating widgets, docs, tests, and CLI scaffolding to the
new token paths.

Changes:

  • Add FTypeface (with fontFamilyFallback) and update FTypography to expose display and body typefaces.
  • Migrate widget styles, examples, docs, and tests from typography.<token> to typography.body.<token> /
    typography.display.<token>.
  • Rework the CLI theme scaffold generator output for typography and remove stale fix_data migrations.

Reviewed changes

Copilot reviewed 89 out of 93 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
forui/tool/cli_generator/generate_themes.dart Updates CLI theme generation to account for FTypography + FTypeface and emit _typography, _display, _body.
forui/tool/cli_generator/constructors.dart Adjusts constructor fragment rewriting to generate correct helper names for FTypography/FTypeface.
forui/test/src/widgets/progresses/circular_progress_test.dart Migrates tests to theme.typography.body.* token access.
forui/test/src/widgets/header/root_header_golden_test.dart Migrates golden tests to typography.display.* for header titles.
forui/test/src/widgets/header/nested_header_golden_test.dart Migrates golden tests to typography.display.* for nested header titles.
forui/test/src/theme/typography_test.dart Adds/updates coverage for FTypography (display/body) and FTypeface (fallback, scaling, extensions).
forui/test/src/theme/style_test.dart Updates FStyle.inherit(...) test setup to use the new FTypography.inherit(...) API.
forui/lib/src/widgets/tooltip/tooltip.dart Switches tooltip default text style to typography.body.xs.
forui/lib/src/widgets/toast/toaster_style.dart Splits toast title/description styling across display and body typefaces.
forui/lib/src/widgets/tile/tile.dart Migrates tile content text/icon sizes to typography.body.*.
forui/lib/src/widgets/tile/tile_group.dart Migrates tile group label/description/error typography to typography.body.*.
forui/lib/src/widgets/text_field/text_field_style.dart Migrates text field sizing styles to typography.body.*.
forui/lib/src/widgets/tabs/tabs.dart Migrates default tabs content text style to typography.body.md.
forui/lib/src/widgets/tabs/tabs_style.dart Migrates tab label styling to typography.body.sm.
forui/lib/src/widgets/slider/slider_styles.dart Migrates slider tick label typography to typography.body.xs.
forui/lib/src/widgets/sidebar/sidebar_item.dart Migrates sidebar item typography to typography.body.sm.
forui/lib/src/widgets/sidebar/sidebar_group.dart Migrates sidebar group label + icon sizes to typography.body.*.
forui/lib/src/widgets/select/single/select_style.dart Migrates single-select empty text style to typography.body.xs.
forui/lib/src/widgets/select/select_item.dart Adjusts focus/unfocus behavior to preserve highlight on last tapped item (issue #1055).
forui/lib/src/widgets/select/multi/select_style.dart Migrates multi-select styles (empty/field/text/icon/tag) to typography.body.*.
forui/lib/src/widgets/select/content/scroll_handle.dart Migrates scroll handle icon sizing to typography.body.md.
forui/lib/src/widgets/select_group/select_group.dart Migrates select group item label/description/error typography to typography.body.sm.
forui/lib/src/widgets/progresses/circular_progress.dart Updates docs + defaults to typography.body.* for icon sizing.
forui/lib/src/widgets/popover_menu/popover_menu.dart Migrates popover menu icon sizing to typography.body.md.
forui/lib/src/widgets/picker/time/time_picker.dart Migrates picker typography to typography.body.*.
forui/lib/src/widgets/picker/picker_style.dart Migrates base picker typography to typography.body.*.
forui/lib/src/widgets/picker/date_time/date_time_picker.dart Migrates date-time picker typography to typography.body.*.
forui/lib/src/widgets/pagination/pagination_style.dart Migrates pagination icon/text/ellipsis styling to typography.body.*.
forui/lib/src/widgets/otp_field/otp_field_style.dart Migrates OTP field item content typography to typography.body.sm.
forui/lib/src/widgets/line_calendar/line_calendar.dart Migrates line calendar typography to typography.body.*.
forui/lib/src/widgets/item/raw_item_content.dart Migrates raw item content typography/icon sizing to typography.body.*.
forui/lib/src/widgets/item/item_content.dart Migrates item content typography/icon sizing to typography.body.*.
forui/lib/src/widgets/header/header.dart Migrates header title typography to typography.display.* and icon sizing accordingly.
forui/lib/src/widgets/dialog/dialog.dart Migrates dialog typography to display for titles and body for content.
forui/lib/src/widgets/card/card.dart Migrates card title to typography.display.* and subtitle to typography.body.*.
forui/lib/src/widgets/calendar/year/year.dart Migrates calendar year text style to typography.body.sm.
forui/lib/src/widgets/calendar/month/month.dart Migrates calendar month text style to typography.body.sm.
forui/lib/src/widgets/calendar/header.dart Migrates calendar header typography to typography.display.*.
forui/lib/src/widgets/calendar/day/day.dart Migrates calendar day text style to typography.body.sm.
forui/lib/src/widgets/calendar/day/day_picker.dart Migrates weekday label typography to typography.body.*.
forui/lib/src/widgets/button/button.dart Migrates button text/icon sizing to typography.body.*.
forui/lib/src/widgets/breadcrumb.dart Migrates breadcrumb typography/icon sizing to typography.body.*.
forui/lib/src/widgets/bottom_navigation_bar/bottom_navigation_bar_item.dart Migrates bottom nav item typography to typography.body.xs3.
forui/lib/src/widgets/badge/badge.dart Migrates badge label typography to typography.body.xs.
forui/lib/src/widgets/avatar/avatar.dart Migrates avatar text styling to typography.display.sm.
forui/lib/src/widgets/autocomplete/autocomplete_item.dart Migrates autocomplete section label typography to typography.body.xs.
forui/lib/src/widgets/autocomplete/autocomplete_content.dart Migrates autocomplete empty text typography to typography.body.sm.
forui/lib/src/widgets/alert.dart Migrates alert icon sizing + title/subtitle typography to display/body split.
forui/lib/src/widgets/accordion/accordion.dart Migrates accordion title/icon to display and body text to body.
forui/lib/src/theme/typography.dart Implements FTypography(display/body), adds FTypeface, and introduces FScalableExtension.
forui/lib/src/theme/theme.dart Updates default DefaultTextStyle to typography.body.sm.
forui/lib/src/theme/theme_data.dart Updates Material TextTheme mapping to use display for headlines and body for body/labels; wires fallback.
forui/lib/src/theme/style.dart Migrates default style icon size to typography.body.lg.fontSize.
forui/lib/src/theme/form_field_style.dart Migrates form field label base typography to typography.body.*.
forui/lib/src/theme/colors.dart Minor docstring grammar tweak (“these colors” → “this [FColors]”).
forui/lib/fix_data/tile_group.yaml Removes stale data-driven fix entries.
forui/lib/fix_data/theme_data.yaml Removes stale data-driven fix entries.
forui/lib/fix_data/select_tile_group.yaml Removes stale data-driven fix entries.
forui/lib/fix_data/select_menu_tile.yaml Removes stale data-driven fix entries.
forui/lib/fix_data/popover_menu.yaml Removes stale data-driven fix entries.
forui/lib/fix_data/line_calendar.yaml Removes stale data-driven fix entries.
forui/lib/fix_data/item_group.yaml Removes stale data-driven fix entries.
forui/lib/fix_data/breadcrumb.yaml Removes stale data-driven fix entries.
forui/CHANGELOG.md Adds release notes for multi-typeface typography and breaking API changes.
forui/bin/commands/theme/create_command.dart Updates generated theme header text to match new typography scaffold behavior.
forui/bin/commands/snippet/snippet.dart Updates Material theme snippet generation to use typography.display/typography.body and fallback list.
docs/content/docs/guides/adding-theme-properties.mdx Updates docs to reference FScalableExtension for typography/typeface extensions.
docs/content/docs/concepts/themes.mdx Updates theming docs/diagram to include FTypeface and the new FTypography structure.
docs_snippets/lib/snippets/guides/customizing_widget_styles/cli/modify_style.dart Updates snippet typography usage to display/body split.
docs_snippets/lib/snippets/guides/customizing_themes/typography.dart Updates generated typography scaffold snippet to emit _typography, _display, _body.
docs_snippets/lib/snippets/guides/customizing_themes/style.dart Updates snippet to use typography.body.* for icon sizing.
docs_snippets/lib/snippets/guides/customizing_themes/accordion_style.dart Updates snippet typography usage to display/body split.
docs_snippets/lib/snippets/concepts/themes/components/typography.dart Updates snippet to use typography.body.xs.
docs_snippets/lib/snippets/concepts/themes/components/custom_font_family.dart Updates snippet to modify typography.body via copyWith and then scale.
docs_snippets/lib/portal_visualization/visualization.dart Updates visualization overlay labels to typography.body.xs.
docs_snippets/lib/examples/overlay/toast.dart Migrates toast example typography to typography.body.*.
docs_snippets/lib/examples/overlay/popover.dart Migrates popover examples typography to typography.body.*.
docs_snippets/lib/examples/overlay/popover_menu.dart Migrates popover-menu example heading typography to typography.display.xl.
docs_snippets/lib/examples/overlay/persistent_sheet.dart Migrates sheet example typography to display for title and body for description.
docs_snippets/lib/examples/overlay/modal_sheet.dart Migrates modal sheet example typography to display for headings and body for content.
docs_snippets/lib/examples/navigation/sidebar.dart Migrates sidebar example typography to typography.body.*.
docs_snippets/lib/examples/layout/resizable.dart Migrates resizable example typography to typography.body.*.
docs_snippets/lib/examples/layout/divider.dart Switches divider example to bind theme.typography.body as the “text” scale.
docs_snippets/lib/examples/foundation/tappable_group.dart Migrates tappable group example typography to typography.body.sm.
docs_snippets/lib/examples/foundation/tappable_bounce.dart Migrates tappable bounce example typography to typography.body.sm.
docs_snippets/lib/examples/foundation/portal.dart Migrates portal example typography to typography.body.*.
docs_snippets/lib/examples/foundation/point_portal.dart Migrates point portal example typography to typography.body.*.
docs_snippets/lib/examples/foundation/overlay.dart Migrates overlay example typography to typography.body.sm.
docs_snippets/lib/examples/foundation/focused_outline.dart Migrates focused outline example typography to typography.body.md.
docs_snippets/lib/examples/form/switch.dart Migrates switch form example typography to display for headings and body for content.
demo/lib/widgets/sidebar.dart Migrates demo sidebar typography to theme.typography.body.*.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread forui/lib/src/theme/typography.dart
Comment on lines 907 to +911
@override
FTypographyExtension<T> copyWith();
FScalableExtension<T> lerp(FScalableExtension<T>? other, double t);

@override
FTypographyExtension<T> lerp(FTypographyExtension<T>? other, double t);
FScalableExtension<T> copyWith();
Comment thread forui/CHANGELOG.md
@@ -1,5 +1,6 @@
## 0.23.0 (Next)

This update introduces the long-awaited context menu, a revamped calendar, and support for multiple typefaces.
Comment thread forui/CHANGELOG.md
Comment on lines +107 to +109
We've added support for multiple typefaces by introducing a `FTypeface` that contains a text scale and changing
`FTypography` to contain a `display` and `body` typeface.

Comment thread forui/CHANGELOG.md
Comment on lines +114 to +115
* **Breaking** Split `FTypography` into two `FTypeface`s. Replace `typography.<token>` with `typography.body.<token>`
(e.g. `typography.sm` becomes `typography.body.sm`).
@auto-maid

auto-maid Bot commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Documentation Preview

Latest Commit SHA bdc5ff5
Preview URL https://af6f9870-forui-docs-dev.duobase.workers.dev/docs

You're seeing this because the docs/samples were updated.

@Pante @claude
Fix CLI style generator mangling nested style names
bdc5ff5 
The typography rework changed _factory's call-site rename to strip a
leading 'F' (`m.group(1).substring(1)`), but generate_styles.dart's
inline pattern (`_mapConstructor`) captures the type name without the
'F', so .substring(1) ate the real first letter (FButtonStyle ->
_uttonStyle), breaking `forui style create` output and the Build CLI
analyze check. The typography path no longer relies on that rename, so
revert it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@Pante Pante merged commit 3d65cba into main Jun 18, 2026
21 of 22 checks passed
@Pante Pante deleted the feature/typography-tokens branch June 18, 2026 16:22
@Pante Pante mentioned this pull request Jun 19, 2026
Merged
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Pante