Add multi-typeface typography

demo/lib/widgets/sidebar.dart

@@ -59,15 +59,15 @@ class Sidebar extends StatelessWidget {
                           children: [
                             Text(
                               'Dash',
-                              style: theme.typography.sm.copyWith(
+                              style: theme.typography.body.sm.copyWith(
                                 fontWeight: .bold,
                                 color: theme.colors.foreground,
                               ),
                               overflow: .ellipsis,
                             ),
                             Text(
                               'dash@forui.dev',
-                              style: theme.typography.xs.copyWith(
+                              style: theme.typography.body.xs.copyWith(
                                 color: theme.colors.mutedForeground,
                               ),
                               overflow: .ellipsis,

docs/content/docs/concepts/themes.mdx

@@ -78,7 +78,12 @@ class FColors {
 
 class FTypography {
     +FTypography(...)
-    +FTypography.inherit(colors)
+    +FTypography.inherit(colors, touch)
+}
+
+class FTypeface {
+    +FTypeface(...)
+    +FTypeface.inherit(colors, touch)
 }
 
 class FIcons {
@@ -119,6 +124,7 @@ note for FVariants "Maps variant constraints, e.g. hovered and pressed, to value
 FTheme --> FThemeData
 FThemeData --> FColors
 FThemeData --> FTypography
+FTypography --> FTypeface
 FThemeData --> FIcons
 FThemeData --> FStyle
 FThemeData --> FHapticFeedback
@@ -132,7 +138,7 @@ The main components in Forui's theming system:
 - **[`FTheme`](https://pub.dev/documentation/forui/latest/forui.theme/FTheme-class.html)**: The root widget that provides the theme data to all widgets in the subtree.
 - **[`FThemeData`](https://pub.dev/documentation/forui/latest/forui.theme/FThemeData-class.html)**: Main class that holds:
   - **[`FColors`](https://pub.dev/documentation/forui/latest/forui.theme/FColors-class.html)**: Color scheme including primary, foreground, and background colors.
-  - **[`FTypography`](https://pub.dev/documentation/forui/latest/forui.theme/FTypography-class.html)**: Typography settings including font family and text styles.
+  - **[`FTypography`](https://pub.dev/documentation/forui/latest/forui.theme/FTypography-class.html)**: Typography, composed of `body` and `display` [`FTypeface`](https://pub.dev/documentation/forui/latest/forui.theme/FTypeface-class.html)s that hold the font family and text styles.
   - **[`FIcons`](https://pub.dev/documentation/forui/latest/forui.theme/FIcons-class.html)**: Icons used by Forui widgets.
   - **[`FStyle`](https://pub.dev/documentation/forui/latest/forui.theme/FStyle-class.html)**: Misc. options such as border radius and icon size.
   - **[`FHapticFeedback`](https://pub.dev/documentation/forui/latest/forui.theme/FHapticFeedback-class.html)**: Haptic feedback callbacks shared across widgets.
@@ -165,22 +171,18 @@ and [`FColors.disable`](https://pub.dev/documentation/forui/latest/forui.theme/F
 
 ### Typography
 
-The `FTypography` class contains the theme's typography settings, including the default font family and various text
-styles.
-
-<Callout type="info">
-    The `TextStyle`s in `FTypography` are based on [Tailwind CSS Font Size](https://tailwindcss.com/docs/font-size).
-    For example, `FTypography.sm` is the equivalent of `text-sm` in Tailwind CSS.
-</Callout>
+The `FTypography` class contains two semantic `FTypeface`s:
+* `display` for prominent text such as headings.
+* `body` for content and UI text.
 
-`FTypography`'s text styles only specify `fontSize` and `height`. Use `copyWith()` to add colors and other properties:
+An `FTypeface` contains several `TextStyle`s across a scale based on
+[Tailwind CSS Font Size](https://tailwindcss.com/docs/font-size). Its text styles only specify `fontSize` and `height`.
+Use `copyWith()` to add colors and other properties:
 
 <CodeSnippet snippet={typographySnippet} />
 
-#### Custom Font Family
-
-Use the `copyWith()` method to change the default font family. As some fonts may have different sizes, the `scale()`
-method is provided to quickly scale all the font sizes.
+Set an `FTypeface`'s font family via its constructor, e.g. `FTypeface.inherit(fontFamily: ...)`, and use `scale()` to
+quickly scale all the font sizes.
 
 <CodeSnippet snippet={customFontFamilySnippet} />
 

docs/content/docs/guides/adding-theme-properties.mdx

@@ -13,8 +13,8 @@ import copyWithExtensionsSnippet from '@/snippets/snippets/guides/adding_theme_p
 ## Create a Theme Extension
 
 Theme extensions must extend [`ThemeExtension`](https://api.flutter.dev/flutter/material/ThemeExtension-class.html) and
-implement `copyWith()` and `lerp()`. Extensions to `FTypography` must instead extend
-[`FTypographyExtension`](https://pub.dev/documentation/forui/latest/forui.theme/FTypographyExtension-class.html) which
+implement `copyWith()` and `lerp()`. Extensions to `FTypography` or `FTypeface` must instead extend
+[`FScalableExtension`](https://pub.dev/documentation/forui/latest/forui.theme/FScalableExtension-class.html) which
 has an additional `scale(...)` method.
 
 To add brand colors to your theme, create a `BrandColors` extension:

docs_snippets/lib/examples/form/switch.dart

@@ -93,7 +93,7 @@ class _FormSwitchPageState extends StatefulExampleState<FormSwitchPage> {
         children: [
           Text(
             'Email Notifications',
-            style: theme.typography.xl2.copyWith(
+            style: theme.typography.display.xl2.copyWith(
               fontWeight: FontWeight.w600,
               color: theme.colors.foreground,
               height: 1.5,
@@ -112,15 +112,15 @@ class _FormSwitchPageState extends StatefulExampleState<FormSwitchPage> {
                       children: [
                         Text(
                           'Marketing Emails',
-                          style: theme.typography.md.copyWith(
+                          style: theme.typography.body.md.copyWith(
                             fontWeight: .w500,
                             color: theme.colors.foreground,
                             height: 1.5,
                           ),
                         ),
                         Text(
                           'Receive emails about new products, features, and more.',
-                          style: theme.typography.sm.copyWith(color: theme.colors.mutedForeground),
+                          style: theme.typography.body.sm.copyWith(color: theme.colors.mutedForeground),
                         ),
                       ],
                     ),
@@ -151,15 +151,15 @@ class _FormSwitchPageState extends StatefulExampleState<FormSwitchPage> {
                       children: [
                         Text(
                           'Security emails',
-                          style: theme.typography.md.copyWith(
+                          style: theme.typography.body.md.copyWith(
                             fontWeight: .w500,
                             color: theme.colors.foreground,
                             height: 1.5,
                           ),
                         ),
                         Text(
                           'Receive emails about your account security.',
-                          style: theme.typography.sm.copyWith(color: theme.colors.mutedForeground),
+                          style: theme.typography.body.sm.copyWith(color: theme.colors.mutedForeground),
                         ),
                       ],
                     ),

docs_snippets/lib/examples/foundation/focused_outline.dart

@@ -17,7 +17,7 @@ class FocusedOutlinePage extends Example {
       padding: const .symmetric(vertical: 8.0, horizontal: 12),
       child: Text(
         'Focused',
-        style: context.theme.typography.md.copyWith(color: context.theme.colors.primaryForeground),
+        style: context.theme.typography.body.md.copyWith(color: context.theme.colors.primaryForeground),
       ),
     ),
   );

docs_snippets/lib/examples/foundation/overlay.dart

@@ -27,7 +27,7 @@ class _State extends StatefulExampleState<OverlayPage> {
             border: .all(color: context.theme.colors.border),
             borderRadius: .circular(4),
           ),
-          child: Text('Overlay content', style: context.theme.typography.sm),
+          child: Text('Overlay content', style: context.theme.typography.body.sm),
         ),
       ),
     ],

docs_snippets/lib/examples/foundation/point_portal.dart

@@ -35,11 +35,11 @@ class _State extends StatefulExampleState<PointPortalPage> {
           mainAxisSize: .min,
           crossAxisAlignment: .start,
           children: [
-            Text('Dimensions', style: context.theme.typography.md),
+            Text('Dimensions', style: context.theme.typography.body.md),
             const SizedBox(height: 7),
             Text(
               'Set the dimensions for the layer.',
-              style: context.theme.typography.sm.copyWith(
+              style: context.theme.typography.body.sm.copyWith(
                 color: context.theme.colors.mutedForeground,
                 fontWeight: FontWeight.w300,
               ),
@@ -48,7 +48,7 @@ class _State extends StatefulExampleState<PointPortalPage> {
             for (final (label, value) in [('Width', '100%'), ('Max. Width', '300px')]) ...[
               Row(
                 children: [
-                  Expanded(child: Text(label, style: context.theme.typography.sm)),
+                  Expanded(child: Text(label, style: context.theme.typography.body.sm)),
                   Expanded(
                     flex: 2,
                     child: FTextField(
@@ -73,7 +73,7 @@ class _State extends StatefulExampleState<PointPortalPage> {
         height: 150,
         decoration: BoxDecoration(color: context.theme.colors.muted, borderRadius: .circular(4)),
         alignment: .center,
-        child: Text('Tap anywhere', style: context.theme.typography.sm),
+        child: Text('Tap anywhere', style: context.theme.typography.body.sm),
       ),
     ),
   );

docs_snippets/lib/examples/foundation/portal.dart

@@ -26,11 +26,11 @@ class PortalPage extends Example {
           mainAxisSize: .min,
           crossAxisAlignment: .start,
           children: [
-            Text('Dimensions', style: context.theme.typography.md),
+            Text('Dimensions', style: context.theme.typography.body.md),
             const SizedBox(height: 7),
             Text(
               'Set the dimensions for the layer.',
-              style: context.theme.typography.sm.copyWith(
+              style: context.theme.typography.body.sm.copyWith(
                 color: context.theme.colors.mutedForeground,
                 fontWeight: FontWeight.w300,
               ),
@@ -39,7 +39,7 @@ class PortalPage extends Example {
             for (final (label, value) in [('Width', '100%'), ('Max. Width', '300px')]) ...[
               Row(
                 children: [
-                  Expanded(child: Text(label, style: context.theme.typography.sm)),
+                  Expanded(child: Text(label, style: context.theme.typography.body.sm)),
                   Expanded(
                     flex: 2,
                     child: FTextField(

docs_snippets/lib/examples/foundation/tappable_bounce.dart

@@ -39,7 +39,7 @@ class TappableBouncePage extends Example {
             padding: const .symmetric(vertical: 8.0, horizontal: 12),
             child: child!,
           ),
-          child: Text(key, style: context.theme.typography.sm),
+          child: Text(key, style: context.theme.typography.body.sm),
         ),
     ],
   );

docs_snippets/lib/examples/foundation/tappable_group.dart

@@ -29,7 +29,7 @@ class TappableGroupPage extends Example {
               padding: const .symmetric(vertical: 8.0, horizontal: 12),
               child: child!,
             ),
-            child: Text(label, style: context.theme.typography.sm),
+            child: Text(label, style: context.theme.typography.body.sm),
           ),
       ],
     ),

docs_snippets/lib/examples/layout/divider.dart

@@ -12,7 +12,7 @@ class DividerPage extends Example {
   @override
   Widget example(BuildContext _) {
     final colors = theme.colors;
-    final text = theme.typography;
+    final text = theme.typography.body;
 
     return Column(
       mainAxisAlignment: .center,

docs_snippets/lib/examples/layout/resizable.dart

@@ -109,13 +109,13 @@ class Label extends StatelessWidget {
             children: [
               Icon(icon, size: 15, color: colors.foreground),
               const SizedBox(width: 3),
-              Text(label, style: typography.sm.copyWith(color: colors.foreground)),
+              Text(label, style: typography.body.sm.copyWith(color: colors.foreground)),
             ],
           ),
           const SizedBox(height: 5),
           Text(
             '${format.format(start)} - ${format.format(end)}',
-            style: typography.sm.copyWith(color: colors.foreground),
+            style: typography.body.sm.copyWith(color: colors.foreground),
           ),
         ],
       ),
@@ -142,12 +142,12 @@ class HorizontalResizablePage extends Example {
         .fixed(
           extent: 100,
           minExtent: 100,
-          builder: (context, data, _) => Align(child: Text('Sidebar', style: context.theme.typography.sm)),
+          builder: (context, data, _) => Align(child: Text('Sidebar', style: context.theme.typography.body.sm)),
         ),
         .fixed(
           extent: 300,
           minExtent: 100,
-          builder: (context, data, _) => Align(child: Text('Content', style: context.theme.typography.sm)),
+          builder: (context, data, _) => Align(child: Text('Content', style: context.theme.typography.body.sm)),
         ),
       ],
     ),
@@ -174,12 +174,12 @@ class DividerResizablePage extends Example {
         .fixed(
           extent: 100,
           minExtent: 100,
-          builder: (context, data, _) => Align(child: Text('Sidebar', style: context.theme.typography.sm)),
+          builder: (context, data, _) => Align(child: Text('Sidebar', style: context.theme.typography.body.sm)),
         ),
         .fixed(
           extent: 300,
           minExtent: 100,
-          builder: (context, data, _) => Align(child: Text('Content', style: context.theme.typography.sm)),
+          builder: (context, data, _) => Align(child: Text('Content', style: context.theme.typography.body.sm)),
         ),
       ],
     ),
@@ -206,12 +206,12 @@ class NoDividerResizablePage extends Example {
         .fixed(
           extent: 100,
           minExtent: 100,
-          builder: (context, data, _) => Align(child: Text('Sidebar', style: context.theme.typography.sm)),
+          builder: (context, data, _) => Align(child: Text('Sidebar', style: context.theme.typography.body.sm)),
         ),
         .fixed(
           extent: 300,
           minExtent: 100,
-          builder: (context, data, _) => Align(child: Text('Content', style: context.theme.typography.sm)),
+          builder: (context, data, _) => Align(child: Text('Content', style: context.theme.typography.body.sm)),
         ),
       ],
     ),

docs_snippets/lib/examples/navigation/sidebar.dart

@@ -48,15 +48,15 @@ class SidebarPage extends Example {
                     children: [
                       Text(
                         'Dash',
-                        style: context.theme.typography.sm.copyWith(
+                        style: context.theme.typography.body.sm.copyWith(
                           fontWeight: .bold,
                           color: context.theme.colors.foreground,
                         ),
                         overflow: .ellipsis,
                       ),
                       Text(
                         'dash@forui.dev',
-                        style: context.theme.typography.xs.copyWith(color: context.theme.colors.mutedForeground),
+                        style: context.theme.typography.body.xs.copyWith(color: context.theme.colors.mutedForeground),
                         overflow: .ellipsis,
                       ),
                     ],
@@ -199,15 +199,17 @@ class SheetSidebarPage extends Example {
                           children: [
                             Text(
                               'Dash',
-                              style: context.theme.typography.sm.copyWith(
+                              style: context.theme.typography.body.sm.copyWith(
                                 fontWeight: .bold,
                                 color: context.theme.colors.foreground,
                               ),
                               overflow: .ellipsis,
                             ),
                             Text(
                               'dash@forui.dev',
-                              style: context.theme.typography.xs.copyWith(color: context.theme.colors.mutedForeground),
+                              style: context.theme.typography.body.xs.copyWith(
+                                color: context.theme.colors.mutedForeground,
+                              ),
                               overflow: .ellipsis,
                             ),
                           ],

docs_snippets/lib/examples/overlay/modal_sheet.dart

@@ -102,8 +102,8 @@ class BlurredModalSheetPage extends Example {
           crossAxisAlignment: .start,
           spacing: 8,
           children: [
-            Text('Account Settings', style: context.theme.typography.lg.copyWith(fontWeight: .w600)),
-            Text('Manage your preferences and profile details.', style: context.theme.typography.sm),
+            Text('Account Settings', style: context.theme.typography.display.lg.copyWith(fontWeight: .w600)),
+            Text('Manage your preferences and profile details.', style: context.theme.typography.body.sm),
             const FDivider(),
             Row(
               spacing: 8,
@@ -112,8 +112,8 @@ class BlurredModalSheetPage extends Example {
                 Column(
                   crossAxisAlignment: .start,
                   children: [
-                    Text('John Renalo', style: context.theme.typography.sm.copyWith(fontWeight: .w600)),
-                    Text('john@doe.com', style: context.theme.typography.xs),
+                    Text('John Renalo', style: context.theme.typography.body.sm.copyWith(fontWeight: .w600)),
+                    Text('john@doe.com', style: context.theme.typography.body.xs),
                   ],
                 ),
               ],
@@ -149,15 +149,15 @@ class Form extends StatelessWidget {
           children: [
             Text(
               'Account',
-              style: context.theme.typography.xl2.copyWith(
+              style: context.theme.typography.display.xl2.copyWith(
                 fontWeight: .w600,
                 color: context.theme.colors.foreground,
                 height: 1.5,
               ),
             ),
             Text(
               'Make changes to your account here. Click save when you are done.',
-              style: context.theme.typography.sm.copyWith(color: context.theme.colors.mutedForeground),
+              style: context.theme.typography.body.sm.copyWith(color: context.theme.colors.mutedForeground),
             ),
             const SizedBox(height: 12),
             SizedBox(

docs_snippets/lib/examples/overlay/persistent_sheet.dart

@@ -108,15 +108,15 @@ class Form extends StatelessWidget {
           children: [
             Text(
               'Account',
-              style: context.theme.typography.xl2.copyWith(
+              style: context.theme.typography.display.xl2.copyWith(
                 fontWeight: .w600,
                 color: context.theme.colors.foreground,
                 height: 1.5,
               ),
             ),
             Text(
               'Make changes to your account here. Click save when you are done.',
-              style: context.theme.typography.sm.copyWith(color: context.theme.colors.mutedForeground),
+              style: context.theme.typography.body.sm.copyWith(color: context.theme.colors.mutedForeground),
             ),
             const SizedBox(height: 8),
             SizedBox(