Fix/font family (#47)

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.2.3
+
+- Expose `ShadTextTheme`
+- Fix `ShadTextTheme` to add ability to change font family
+- Add `materialThemeBuilder` to default `ShadApp`
+- Add `ShadTextTheme.fromGoogleFont` to use a Google Font
+
 ## 0.2.2
 
 - Fix lerp of `ShadDecoration` and `ShadBorder`

example/lib/main.dart

@@ -81,10 +81,25 @@ class App extends StatelessWidget {
           theme: ShadThemeData(
             brightness: Brightness.light,
             colorScheme: const ShadZincColorScheme.light(),
+            // Example with google fonts
+            // textTheme: ShadTextTheme.fromGoogleFont(
+            //   from: GoogleFonts.pottaOne,
+            //   colorScheme: const ShadZincColorScheme.light(),
+            // ),
+            // Example of custom font family
+            // textTheme: ShadTextTheme(
+            //   colorScheme: const ShadZincColorScheme.light(),
+            //   family: 'UbuntuMono',
+            // ),
           ),
           darkTheme: ShadThemeData(
             brightness: Brightness.dark,
             colorScheme: const ShadZincColorScheme.dark(),
+            // Example of custom font family
+            // textTheme: ShadTextTheme(
+            //   colorScheme: const ShadZincColorScheme.dark(),
+            //   family: 'UbuntuMono',
+            // ),
           ),
           home: const MainPage(),
         );

example/pubspec.yaml

@@ -16,6 +16,7 @@ dependencies:
   flutter_solidart: ^1.7.0
   awesome_flutter_extensions: ^1.2.0
   multi_split_view: ^2.4.0
+  google_fonts: 6.1.0
 
 dev_dependencies:
   flutter_test:
@@ -29,3 +30,15 @@ flutter:
   uses-material-design: true
   assets:
     - assets/
+
+  fonts:
+    - family: UbuntuMono
+      fonts:
+        - asset: fonts/UbuntuMono-Regular.ttf
+        - asset: fonts/UbuntuMono-Bold.ttf
+          weight: 700
+        - asset: fonts/UbuntuMono-Italic.ttf
+          style: italic
+        - asset: fonts/UbuntuMono-BoldItalic.ttf
+          weight: 700
+          style: italic

lib/shadcn_ui.dart

@@ -78,6 +78,8 @@ export 'src/theme/components/slider.dart';
 export 'src/theme/components/switch.dart';
 export 'src/theme/components/toast.dart';
 export 'src/theme/components/tooltip.dart';
+export 'src/theme/text_theme/theme.dart';
+export 'src/theme/text_theme/text_styles_default.dart';
 
 // Utils
 export 'src/utils/position.dart';

lib/src/app.dart

@@ -10,7 +10,6 @@ import 'package:flutter_localizations/flutter_localizations.dart'
 import 'package:shadcn_ui/src/components/toast.dart';
 import 'package:shadcn_ui/src/theme/color_scheme/slate.dart';
 import 'package:shadcn_ui/src/theme/data.dart';
-import 'package:shadcn_ui/src/theme/text_theme/defaults.dart';
 import 'package:shadcn_ui/src/theme/theme.dart';
 
 enum ShadAppType {
@@ -622,8 +621,7 @@ class _ShadAppState extends State<ShadApp> {
   ThemeData materialTheme(BuildContext context) {
     final themeData = theme(context);
     final mTheme = ThemeData(
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: themeData.textTheme.family,
       extensions: themeData.extensions,
       colorScheme: ColorScheme(
         brightness: themeData.brightness,

lib/src/theme/data.dart

@@ -22,7 +22,7 @@ import 'package:shadcn_ui/src/theme/components/slider.dart';
 import 'package:shadcn_ui/src/theme/components/switch.dart';
 import 'package:shadcn_ui/src/theme/components/toast.dart';
 import 'package:shadcn_ui/src/theme/components/tooltip.dart';
-import 'package:shadcn_ui/src/theme/text_theme/data.dart';
+import 'package:shadcn_ui/src/theme/text_theme/theme.dart';
 import 'package:shadcn_ui/src/theme/themes/base.dart';
 import 'package:shadcn_ui/src/theme/themes/component_default.dart';
 import 'package:shadcn_ui/src/utils/responsive.dart';
@@ -49,7 +49,7 @@ class ShadThemeData extends ShadBaseTheme {
     ShadTooltipTheme? tooltipTheme,
     ShadPopoverTheme? popoverTheme,
     ShadDecoration? decoration,
-    ShadTextThemeData? textTheme,
+    ShadTextTheme? textTheme,
     double? disabledOpacity,
     ShadSelectTheme? selectTheme,
     ShadOptionTheme? optionTheme,
@@ -72,9 +72,11 @@ class ShadThemeData extends ShadBaseTheme {
   }) {
     final effectiveRadius =
         radius ?? const BorderRadius.all(Radius.circular(6));
+
     final effectiveTextTheme =
         ShadComponentDefaultTheme.textTheme(colorScheme: colorScheme)
             .mergeWith(textTheme);
+
     return ShadThemeData._internal(
       colorScheme: colorScheme,
       brightness: brightness,
@@ -292,7 +294,7 @@ class ShadThemeData extends ShadBaseTheme {
       tooltipTheme: ShadTooltipTheme.lerp(a.tooltipTheme, b.tooltipTheme, t),
       popoverTheme: ShadPopoverTheme.lerp(a.popoverTheme, b.popoverTheme, t),
       decoration: ShadDecoration.lerp(a.decoration, b.decoration, t),
-      textTheme: ShadTextThemeData.lerp(a.textTheme, b.textTheme, t),
+      textTheme: ShadTextTheme.lerp(a.textTheme, b.textTheme, t),
       disabledOpacity: lerpDouble(a.disabledOpacity, b.disabledOpacity, t),
       selectTheme: ShadSelectTheme.lerp(a.selectTheme, b.selectTheme, t),
       optionTheme: ShadOptionTheme.lerp(a.optionTheme, b.optionTheme, t),
@@ -438,7 +440,7 @@ class ShadThemeData extends ShadBaseTheme {
     ShadTooltipTheme? tooltipTheme,
     ShadPopoverTheme? popoverTheme,
     ShadDecoration? decoration,
-    ShadTextThemeData? textTheme,
+    ShadTextTheme? textTheme,
     double? disabledOpacity,
     ShadSelectTheme? selectTheme,
     ShadOptionTheme? optionTheme,

lib/src/theme/text_theme/defaults.dart → lib/src/theme/text_theme/text_styles_default.dart

@@ -6,6 +6,7 @@ const kDefaultFontFamily = 'Geist';
 abstract class ShadTextDefaultTheme {
   static TextStyle h1Large({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 48,
@@ -14,14 +15,14 @@ abstract class ShadTextDefaultTheme {
       fontWeight: FontWeight.w800,
       height: 48 / 48,
       letterSpacing: -0.4,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
       color: colorScheme.foreground,
     );
   }
 
   static TextStyle h1({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 36,
@@ -30,14 +31,14 @@ abstract class ShadTextDefaultTheme {
       fontWeight: FontWeight.w800,
       height: 40 / 36,
       letterSpacing: -0.4,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
       color: colorScheme.foreground,
     );
   }
 
   static TextStyle h2({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 30,
@@ -46,14 +47,14 @@ abstract class ShadTextDefaultTheme {
       fontWeight: FontWeight.w600,
       height: 36 / 30,
       letterSpacing: -0.4,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
       color: colorScheme.foreground,
     );
   }
 
   static TextStyle h3({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 24,
@@ -62,14 +63,14 @@ abstract class ShadTextDefaultTheme {
       fontWeight: FontWeight.w600,
       height: 32 / 24,
       letterSpacing: -0.4,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
       color: colorScheme.foreground,
     );
   }
 
   static TextStyle h4({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 20,
@@ -78,14 +79,14 @@ abstract class ShadTextDefaultTheme {
       fontWeight: FontWeight.w600,
       height: 28 / 20,
       letterSpacing: -0.4,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
       color: colorScheme.foreground,
     );
   }
 
   static TextStyle p({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 16,
@@ -94,14 +95,14 @@ abstract class ShadTextDefaultTheme {
       fontWeight: FontWeight.w400,
       height: 28 / 16,
       letterSpacing: 0,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
       color: colorScheme.foreground,
     );
   }
 
   static TextStyle blockquote({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 16,
@@ -110,14 +111,14 @@ abstract class ShadTextDefaultTheme {
       fontWeight: FontWeight.w400,
       height: 24 / 16,
       letterSpacing: 0,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
       color: colorScheme.foreground,
     );
   }
 
   static TextStyle table({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 16,
@@ -126,14 +127,14 @@ abstract class ShadTextDefaultTheme {
       fontWeight: FontWeight.w700,
       height: 24 / 16,
       letterSpacing: 0,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
       color: colorScheme.foreground,
     );
   }
 
   static TextStyle list({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 16,
@@ -142,14 +143,14 @@ abstract class ShadTextDefaultTheme {
       fontWeight: FontWeight.w400,
       height: 24 / 16,
       letterSpacing: 0,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
       color: colorScheme.foreground,
     );
   }
 
   static TextStyle lead({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 20,
@@ -159,13 +160,13 @@ abstract class ShadTextDefaultTheme {
       height: 28 / 20,
       letterSpacing: 0,
       color: colorScheme.mutedForeground,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
     );
   }
 
   static TextStyle large({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 18,
@@ -174,14 +175,14 @@ abstract class ShadTextDefaultTheme {
       fontWeight: FontWeight.w600,
       height: 28 / 18,
       letterSpacing: 0,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
       color: colorScheme.foreground,
     );
   }
 
   static TextStyle small({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 14,
@@ -190,14 +191,14 @@ abstract class ShadTextDefaultTheme {
       fontWeight: FontWeight.w500,
       height: 14 / 14,
       letterSpacing: 0,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
       color: colorScheme.foreground,
     );
   }
 
   static TextStyle muted({
     required ShadColorScheme colorScheme,
+    required String family,
   }) {
     return TextStyle(
       fontSize: 14,
@@ -207,8 +208,7 @@ abstract class ShadTextDefaultTheme {
       height: 20 / 14,
       letterSpacing: 0,
       color: colorScheme.mutedForeground,
-      fontFamily: kDefaultFontFamily,
-      package: 'shadcn_ui',
+      fontFamily: family,
     );
   }
 }