Typography revamp (#49)

* Initial

* Add documentation for widgets (#48)

* Fix separator throwing error in row

* Document badge

* Document button

* Document card

* Document dialog

* Document header

* Add documentation for remaining widgets

* Commit from GitHub Actions (Forui Presubmit)

* Fix golden images

* Commit from GitHub Actions (Forui Samples Presubmit)

* Fix gitignore

* Commit from GitHub Actions (Forui Samples Presubmit)

---------

Co-authored-by: Pante <[email protected]>

* Commit for rebase

* Initial

* Commit for rebase

* Resolve merge conflict

* Complete implementation

* Update golden tests

* Fix failing build

* Fix pr issues

---------

Co-authored-by: Matthias Ngeo <[email protected]>
Co-authored-by: Pante <[email protected]>

CONTRIBUTING.md

@@ -97,41 +97,6 @@ They should:
 5. implement `operator ==` and `hashCode`.
 
 
-Widget should not scale `TextStyle`S during initialization. `TextStyle`s should be scaled in a widget's build method instead.
-This avoids confusion about whether `TextStyle`s are automatically scaled inside widget styles.
-
-✅ Prefer this:
-```dart
-class FooStyle {
-  final TextStyle text;
-  
-  FooStyle.inherit({FFont font, FColorScheme scheme}): text = const TextStyle(size: 1);
-}
-
-class Foo extends StatelessWidget {
-  final FooStyle style;
-  
-  @overrride
-  Widget build(BuildContext context) => Text('Hi', style: style.text.withFont(context.theme.font));
-}
-```
-
-❌ Instead of:
-```dart
-class FooStyle {
-  final TextStyle text;
-
-  FooStyle.inherit({FFont font, FColorScheme scheme}): text = const TextStyle(size: 1).withFont(font);
-}
-
-class Foo extends StatelessWidget {
-  final FooStyle style;
-
-  @overrride
-  Widget build(BuildContext context) => Text('Hi', style: style.text);
-}
-```
-
 ## Expose `String` and `Widget` variants of the same parameter.
 
 Widgets typically contain string-based content such as titles and labels. These widgets should expose a `String` and

forui/lib/src/theme/theme.dart

@@ -75,7 +75,8 @@ class FTheme extends StatelessWidget {
   ///    );
   ///  }
   /// ```
-  @useResult static FThemeData of(BuildContext context) {
+  @useResult
+  static FThemeData of(BuildContext context) {
     final theme = context.dependOnInheritedWidgetOfExactType<_InheritedTheme>();
     return theme?.data ?? FThemes.zinc.light;
   }
@@ -99,18 +100,18 @@ class FTheme extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) => _InheritedTheme(
-    data: data,
-    child: Directionality(
-      textDirection: textDirection ?? Directionality.of(context),
-      child: DefaultTextStyle(
-        style: data.typography.toTextStyle(
-          fontSize: data.typography.base,
-          color: data.colorScheme.foreground,
+        data: data,
+        child: Directionality(
+          textDirection: textDirection ?? Directionality.of(context),
+          child: DefaultTextStyle(
+            style: data.typography.base.copyWith(
+              fontFamily: data.typography.defaultFontFamily,
+              color: data.colorScheme.foreground,
+            ),
+            child: child,
+          ),
         ),
-        child: child,
-      ),
-    ),
-  );
+      );
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -138,7 +139,6 @@ class _InheritedTheme extends InheritedWidget {
 
 /// Provides functions for accessing the current [FThemeData].
 extension ThemeBuildContext on BuildContext {
-
   /// Returns the current [FThemeData], or [FThemes.zinc.light] if there is no ancestor [FTheme].
   ///
   /// ## Troubleshooting:
@@ -180,5 +180,4 @@ extension ThemeBuildContext on BuildContext {
   ///  }
   /// ```
   FThemeData get theme => FTheme.of(this);
-
 }

forui/lib/src/theme/theme_data.dart

@@ -70,22 +70,31 @@ final class FThemeData with Diagnosticable {
   });
 
   /// Creates a [FThemeData] that configures the widget styles using the given properties.
-  FThemeData.inherit({
-    required this.colorScheme,
-    this.typography = const FTypography(),
-    this.style = const FStyle(),
-  })  : badgeStyles = FBadgeStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
-        buttonStyles = FButtonStyles.inherit(
-          colorScheme: colorScheme,
-          typography: typography,
-          style: style,
-        ),
-        cardStyle = FCardStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
-        dialogStyle = FDialogStyle.inherit(style: style, colorScheme: colorScheme, typography: typography),
-        headerStyle = FHeaderStyle.inherit(colorScheme: colorScheme, typography: typography),
-        textFieldStyle = FTextFieldStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
-        separatorStyles = FSeparatorStyles.inherit(colorScheme: colorScheme, style: style),
-        switchStyle = FSwitchStyle.inherit(colorScheme: colorScheme);
+  factory FThemeData.inherit({
+    required FColorScheme colorScheme,
+    FStyle style = const FStyle(),
+    FTypography? typography,
+  }) {
+    typography ??= FTypography.inherit(colorScheme: colorScheme);
+
+    return FThemeData(
+      colorScheme: colorScheme,
+      typography: typography,
+      style: style,
+      badgeStyles: FBadgeStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
+      buttonStyles: FButtonStyles.inherit(
+        colorScheme: colorScheme,
+        typography: typography,
+        style: style,
+      ),
+      cardStyle: FCardStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
+      dialogStyle: FDialogStyle.inherit(style: style, colorScheme: colorScheme, typography: typography),
+      headerStyle: FHeaderStyle.inherit(colorScheme: colorScheme, typography: typography),
+      textFieldStyle: FTextFieldStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
+      separatorStyles: FSeparatorStyles.inherit(colorScheme: colorScheme, style: style),
+      switchStyle: FSwitchStyle.inherit(colorScheme: colorScheme),
+    );
+  }
 
   /// Returns a copy of this [FThemeData] with the given properties replaced.
   ///
@@ -103,7 +112,8 @@ final class FThemeData with Diagnosticable {
   /// print(theme.colorScheme == copy.colorScheme); // true
   /// print(copy.typography); // bar
   /// ```
-  @useResult FThemeData copyWith({
+  @useResult
+  FThemeData copyWith({
     FColorScheme? colorScheme,
     FTypography? typography,
     FStyle? style,