chore: use theme.of(context) text theme in settings and around app (#1466)

* chore: use theme.of(context) text theme in settings and around app

* chore: add textDecoration to FlowyText

frontend/app_flowy/lib/user/presentation/sign_in_screen.dart

@@ -4,7 +4,6 @@ import 'package:app_flowy/user/presentation/router.dart';
 import 'package:app_flowy/user/presentation/widgets/background.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
@@ -17,7 +16,6 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:dartz/dartz.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class SignInScreen extends StatelessWidget {
   final AuthRouter router;
@@ -103,7 +101,8 @@ class SignUpPrompt extends StatelessWidget {
           color: Theme.of(context).hintColor,
         ),
         TextButton(
-          style: TextButton.styleFrom(textStyle: TextStyles.body1),
+          style: TextButton.styleFrom(
+              textStyle: Theme.of(context).textTheme.bodyMedium),
           onPressed: () => router.pushSignUpScreen(context),
           child: Text(
             LocaleKeys.signUp_buttonText.tr(),
@@ -145,8 +144,7 @@ class ForgetPasswordButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return TextButton(
       style: TextButton.styleFrom(
-        textStyle: TextStyles.body1,
+          textStyle: Theme.of(context).textTheme.bodyMedium),
-      ),
       onPressed: () => router.pushForgetPasswordScreen(context),
       child: Text(
         LocaleKeys.signIn_forgotPassword.tr(),
@@ -169,7 +167,6 @@ class PasswordTextField extends StatelessWidget {
       builder: (context, state) {
         return RoundedInputField(
           obscureText: true,
-          style: TextStyles.body1.size(FontSizes.s14),
           obscureIcon: svgWidget("home/hide"),
           obscureHideIcon: svgWidget("home/show"),
           hintText: LocaleKeys.signIn_passwordHint.tr(),
@@ -200,7 +197,6 @@ class EmailTextField extends StatelessWidget {
       builder: (context, state) {
         return RoundedInputField(
           hintText: LocaleKeys.signIn_emailHint.tr(),
-          style: TextStyles.body1.size(FontSizes.s14),
           errorText: context
               .read<SignInBloc>()
               .state

frontend/app_flowy/lib/user/presentation/sign_up_screen.dart

@@ -3,8 +3,7 @@ import 'package:app_flowy/user/application/sign_up_bloc.dart';
 import 'package:app_flowy/user/presentation/router.dart';
 import 'package:app_flowy/user/presentation/widgets/background.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
-import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -16,7 +15,6 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:dartz/dartz.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class SignUpScreen extends StatelessWidget {
   final AuthRouter router;
@@ -90,15 +88,18 @@ class SignUpPrompt extends StatelessWidget {
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        Text(
+        FlowyText.medium(
           LocaleKeys.signUp_alreadyHaveAnAccount.tr(),
-          style: TextStyle(color: Theme.of(context).hintColor, fontSize: 12),
+          color: Theme.of(context).hintColor,
         ),
         TextButton(
-          style: TextButton.styleFrom(textStyle: TextStyles.body1),
+          style: TextButton.styleFrom(
+              textStyle: Theme.of(context).textTheme.bodyMedium),
           onPressed: () => Navigator.pop(context),
-          child: Text(LocaleKeys.signIn_buttonText.tr(),
+          child: FlowyText.medium(
-              style: TextStyle(color: Theme.of(context).colorScheme.primary)),
+            LocaleKeys.signIn_buttonText.tr(),
+            color: Theme.of(context).colorScheme.primary,
+          ),
         ),
       ],
     );
@@ -139,7 +140,6 @@ class PasswordTextField extends StatelessWidget {
           obscureText: true,
           obscureIcon: svgWidget("home/hide"),
           obscureHideIcon: svgWidget("home/show"),
-          style: TextStyles.body1.size(FontSizes.s14),
           hintText: LocaleKeys.signUp_passwordHint.tr(),
           normalBorderColor: Theme.of(context).colorScheme.outline,
           errorBorderColor: Theme.of(context).colorScheme.error,
@@ -173,7 +173,6 @@ class RepeatPasswordTextField extends StatelessWidget {
           obscureText: true,
           obscureIcon: svgWidget("home/hide"),
           obscureHideIcon: svgWidget("home/show"),
-          style: TextStyles.body1.size(FontSizes.s14),
           hintText: LocaleKeys.signUp_repeatPasswordHint.tr(),
           normalBorderColor: Theme.of(context).colorScheme.outline,
           errorBorderColor: Theme.of(context).colorScheme.error,

frontend/app_flowy/lib/user/presentation/skip_log_in_screen.dart

@@ -3,8 +3,8 @@ import 'package:app_flowy/user/presentation/router.dart';
 import 'package:app_flowy/user/presentation/widgets/background.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/uuid.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flowy_sdk/log.dart';
@@ -13,7 +13,6 @@ import 'package:flowy_sdk/protobuf/flowy-folder/protobuf.dart';
 import 'package:flowy_sdk/protobuf/flowy-error/errors.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart';
 import 'package:flutter/material.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 import 'package:url_launcher/url_launcher.dart';
 import 'package:dartz/dartz.dart' as dartz;
 import 'package:app_flowy/generated/locale_keys.g.dart';
@@ -61,22 +60,23 @@ class _SkipLogInScreenState extends State<SkipLogInScreen> {
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: [
             InkWell(
-              child: Text(
+              hoverColor: Colors.transparent,
+              onTap: () =>
+                  _launchURL('https://github.com/AppFlowy-IO/appflowy'),
+              child: FlowyText.medium(
                 LocaleKeys.githubStarText.tr(),
-                style: TextStyles.general(color: Colors.blue).underline,
+                color: Theme.of(context).colorScheme.primary,
+                decoration: TextDecoration.underline,
               ),
-              onTap: () {
-                _launchURL('https://github.com/AppFlowy-IO/appflowy');
-              },
             ),
             InkWell(
-              child: Text(
+              hoverColor: Colors.transparent,
+              onTap: () => _launchURL('https://www.appflowy.io/blog'),
+              child: FlowyText.medium(
                 LocaleKeys.subscribeNewsletterText.tr(),
-                style: TextStyles.general(color: Colors.blue).underline,
+                color: Theme.of(context).colorScheme.primary,
+                decoration: TextDecoration.underline,
               ),
-              onTap: () {
-                _launchURL('https://www.appflowy.io/blog');
-              },
             ),
           ],
         )

frontend/app_flowy/lib/user/presentation/widgets/background.dart

@@ -1,6 +1,7 @@
 import 'dart:math';
 
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
@@ -47,7 +48,7 @@ class FlowyLogoTitle extends StatelessWidget {
           const VSpace(30),
           FlowyText.semibold(
             title,
-            fontSize: 24,
+            fontSize: FontSizes.s24,
           ),
         ],
       ),

frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart

@@ -3,8 +3,8 @@ import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:expandable/expandable.dart';
+import 'package:flowy_infra/color_extension.dart';
 import 'package:flowy_infra/icon_data.dart';
-import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder/app.pb.dart';
 import 'package:flutter/material.dart';
@@ -102,7 +102,7 @@ class MenuAppHeader extends StatelessWidget {
   Widget _renderCreateViewButton(BuildContext context) {
     return Tooltip(
       message: LocaleKeys.menuAppHeader_addPageTooltip.tr(),
-      textStyle: TextStyles.caption.textColor(Colors.white),
+      textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
       child: AddButton(
         onSelected: (pluginBuilder) {
           context.read<AppBloc>().add(

frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart

@@ -224,7 +224,9 @@ class MenuTopBar extends StatelessWidget {
                 const Spacer(),
                 Tooltip(
                   richMessage: sidebarTooltipTextSpan(
-                      LocaleKeys.sideBar_closeSidebar.tr()),
+                    context,
+                    LocaleKeys.sideBar_closeSidebar.tr(),
+                  ),
                   child: FlowyIconButton(
                     width: 28,
                     hoverColor: Colors.transparent,

frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart

@@ -2,9 +2,9 @@ import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/application/menu/menu_user_bloc.dart';
 import 'package:app_flowy/workspace/presentation/settings/settings_dialog.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_user_view.dart';
+import 'package:flowy_infra/color_extension.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flowy_sdk/protobuf/flowy-user/protobuf.dart' show UserProfilePB;
@@ -75,7 +75,7 @@ class MenuUser extends StatelessWidget {
     final userProfile = context.read<MenuUserBloc>().state.userProfile;
     return Tooltip(
       message: LocaleKeys.settings_menu_open.tr(),
-      textStyle: TextStyles.caption.textColor(Colors.white),
+      textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
       child: IconButton(
         onPressed: () {
           showDialog(

frontend/app_flowy/lib/workspace/presentation/home/navigation.dart

@@ -3,16 +3,17 @@ import 'dart:io';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/home/home_bloc.dart';
 import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
+import 'package:flowy_infra/color_extension.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/notifier.dart';
 import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 typedef NaviAction = void Function();
 
@@ -100,7 +101,9 @@ class FlowyNavigation extends StatelessWidget {
               turns: const AlwaysStoppedAnimation(180 / 360),
               child: Tooltip(
                   richMessage: sidebarTooltipTextSpan(
-                      LocaleKeys.sideBar_openSidebar.tr()),
+                    context,
+                    LocaleKeys.sideBar_openSidebar.tr(),
+                  ),
                   child: FlowyIconButton(
                     width: 24,
                     hoverColor: Colors.transparent,
@@ -200,18 +203,16 @@ class EllipsisNaviItem extends NavigationItem {
   NavigationCallback get action => (id) {};
 }
 
-TextSpan sidebarTooltipTextSpan(String hintText) => TextSpan(
+TextSpan sidebarTooltipTextSpan(BuildContext context, String hintText) =>
+    TextSpan(
       children: [
         TextSpan(
           text: "$hintText\n",
-          style: TextStyles.caption,
+          style: AFThemeExtension.of(context).callout.textColor(Colors.white),
         ),
         TextSpan(
           text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
-          style: TextStyles.general(
+          style: AFThemeExtension.of(context).caption.textColor(Colors.white60),
-            fontSize: FontSizes.s11,
-            color: Colors.white60,
-          ),
         ),
       ],
     );

frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart

@@ -2,11 +2,9 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/appearance.dart';
 import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
-import 'package:flowy_infra/text_style.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 import '../../widgets/toggle/toggle.dart';
 
@@ -21,19 +19,13 @@ class SettingsAppearanceView extends StatelessWidget {
         children: [
           Row(
             children: [
-              Text(
+              FlowyText.medium(LocaleKeys.settings_appearance_lightLabel.tr()),
-                LocaleKeys.settings_appearance_lightLabel.tr(),
-                style: TextStyles.body1.size(FontSizes.s14),
-              ),
               Toggle(
                 value: Theme.of(context).brightness == Brightness.dark,
                 onChanged: (_) => setTheme(context),
                 style: ToggleStyle.big,
               ),
-              Text(
+              FlowyText.medium(LocaleKeys.settings_appearance_darkLabel.tr())
-                LocaleKeys.settings_appearance_darkLabel.tr(),
-                style: TextStyles.body1.size(FontSizes.s14),
-              ),
             ],
           ),
         ],

frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart

@@ -1,12 +1,10 @@
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/appearance.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
-import 'package:flowy_infra/text_style.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_infra/language.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class SettingsLanguageView extends StatelessWidget {
   const SettingsLanguageView({Key? key}) : super(key: key);
@@ -19,10 +17,7 @@ class SettingsLanguageView extends StatelessWidget {
         children: [
           Row(
             children: [
-              Text(
+              FlowyText.medium(LocaleKeys.settings_menu_language.tr()),
-                LocaleKeys.settings_menu_language.tr(),
-                style: TextStyles.body1.size(FontSizes.s14),
-              ),
               const LanguageSelectorDropdown(),
             ],
           ),
@@ -87,10 +82,7 @@ class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
                 value: locale,
                 child: Padding(
                   padding: const EdgeInsets.all(12.0),
-                  child: Text(
+                  child: FlowyText.medium(languageFromLocale(locale)),
-                    languageFromLocale(locale),
-                    style: TextStyles.body1.size(FontSizes.s14),
-                  ),
                 ),
               );
             }).toList(),

frontend/app_flowy/lib/workspace/presentation/widgets/dialogs.dart

@@ -1,5 +1,4 @@
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/buttons/primary_button.dart';
 import 'package:flowy_infra_ui/widget/buttons/secondary_button.dart';
@@ -11,6 +10,7 @@ import 'package:flowy_infra_ui/style_widget/text_input.dart';
 import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
 export 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class NavigatorTextFieldDialog extends StatefulWidget {
   final String value;
@@ -56,10 +56,8 @@ class _CreateTextFieldDialog extends State<NavigatorTextFieldDialog> {
           FlowyFormTextInput(
             hintText: LocaleKeys.dialogCreatePageNameHint.tr(),
             initialValue: widget.value,
-            textStyle: TextStyles.general(
+            textStyle:
-              fontSize: 24,
+                Theme.of(context).textTheme.bodySmall!.size(FontSizes.s24),
-              fontWeight: FontWeight.w400,
-            ),
             autoFocus: true,
             onChanged: (text) {
               newValue = text;

frontend/app_flowy/lib/workspace/presentation/widgets/left_bar_item.dart

@@ -1,11 +1,8 @@
 import 'package:app_flowy/workspace/application/view/view_listener.dart';
 import 'package:app_flowy/workspace/application/view/view_service.dart';
-import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_sdk/log.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart';
 import 'package:flutter/material.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class ViewLeftBarItem extends StatefulWidget {
   final ViewPB view;
@@ -63,11 +60,11 @@ class _ViewLeftBarItemState extends State<ViewLeftBarItem> {
         focusNode: _focusNode,
         scrollPadding: EdgeInsets.zero,
         decoration: const InputDecoration(
-          contentPadding: EdgeInsets.zero,
+          contentPadding: EdgeInsets.symmetric(vertical: 4.0),
           border: InputBorder.none,
           isDense: true,
         ),
-        style: TextStyles.body1.size(FontSizes.s14),
+        style: Theme.of(context).textTheme.bodyMedium,
         // cursorColor: widget.cursorColor,
         // obscureText: widget.enableObscure,
       ),

frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart

@@ -8,6 +8,7 @@ class FlowyText extends StatelessWidget {
   final TextAlign? textAlign;
   final int? maxLines;
   final Color? color;
+  final TextDecoration? decoration;
 
   const FlowyText(
     this.title, {
@@ -18,6 +19,7 @@ class FlowyText extends StatelessWidget {
     this.textAlign,
     this.color,
     this.maxLines = 1,
+    this.decoration,
   }) : super(key: key);
 
   const FlowyText.regular(
@@ -28,6 +30,7 @@ class FlowyText extends StatelessWidget {
     this.color,
     this.textAlign,
     this.maxLines = 1,
+    this.decoration,
   })  : fontWeight = FontWeight.w400,
         super(key: key);
 
@@ -39,6 +42,7 @@ class FlowyText extends StatelessWidget {
     this.color,
     this.textAlign,
     this.maxLines = 1,
+    this.decoration,
   })  : fontWeight = FontWeight.w500,
         super(key: key);
 
@@ -50,6 +54,7 @@ class FlowyText extends StatelessWidget {
     this.color,
     this.textAlign,
     this.maxLines = 1,
+    this.decoration,
   })  : fontWeight = FontWeight.w600,
         super(key: key);
 
@@ -64,6 +69,7 @@ class FlowyText extends StatelessWidget {
             fontSize: fontSize,
             fontWeight: fontWeight,
             color: color,
+            decoration: decoration,
           ),
     );
   }

frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart

@@ -15,7 +15,7 @@ class RoundedInputField extends StatefulWidget {
   final Color? cursorColor;
   final Color? focusBorderColor;
   final String errorText;
-  final TextStyle style;
+  final TextStyle? style;
   final ValueChanged<String>? onChanged;
   final Function(String)? onEditingComplete;
   final String? initialValue;
@@ -42,7 +42,7 @@ class RoundedInputField extends StatefulWidget {
     this.errorBorderColor,
     this.focusBorderColor,
     this.cursorColor,
-    this.style = const TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
+    this.style,
     this.margin = EdgeInsets.zero,
     this.padding = EdgeInsets.zero,
     this.contentPadding = const EdgeInsets.symmetric(horizontal: 10),
@@ -113,7 +113,7 @@ class _RoundedInputFieldState extends State<RoundedInputField> {
           cursorColor:
               widget.cursorColor ?? Theme.of(context).colorScheme.primary,
           obscureText: obscuteText,
-          style: widget.style,
+          style: widget.style ?? Theme.of(context).textTheme.bodyMedium,
           decoration: InputDecoration(
             contentPadding: widget.contentPadding,
             hintText: widget.hintText,