feat: introduce a default font (#1210)

* style: code auto-format * feat: introduce default poppins font * chore: port more const textstyles to shared styles
2024-08-30 18:12:39 +00:00 · 2022-10-25 19:49:58 +08:00 · 2022-10-25 19:49:58 +08:00 · 1e6c4a4d88
commit 1e6c4a4d88
parent 18185cc90c
39 changed files with 343 additions and 241 deletions
--- a/frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart
+++ b/frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart
@ -1,9 +1,12 @@
 import 'package:app_flowy/plugins/board/application/card/board_text_cell_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
 import 'package:app_flowy/plugins/grid/presentation/widgets/cell/cell_builder.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:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 import 'board_cell.dart';
 import 'define.dart';

@ -150,11 +153,7 @@ class _BoardTextCellState extends State<BoardTextCell> {
        onChanged: (value) => focusChanged(),
        onEditingComplete: () => focusNode.unfocus(),
        maxLines: null,
-        style: const TextStyle(
-          fontSize: 14,
-          fontWeight: FontWeight.w500,
-          fontFamily: 'Mulish',
-        ),
+        style: TextStyles.body1.size(FontSizes.s14),
        decoration: InputDecoration(
          // Magic number 4 makes the textField take up the same space as FlowyText
          contentPadding: EdgeInsets.symmetric(
--- a/frontend/app_flowy/lib/plugins/board/presentation/card/board_url_cell.dart
+++ b/frontend/app_flowy/lib/plugins/board/presentation/card/board_url_cell.dart
@ -1,8 +1,11 @@
 import 'package:app_flowy/plugins/board/application/card/board_url_cell_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';

 import 'define.dart';

@ -53,11 +56,10 @@ class _BoardUrlCellState extends State<BoardUrlCell> {
                  textAlign: TextAlign.left,
                  text: TextSpan(
                    text: state.content,
-                    style: TextStyle(
+                    style: TextStyles.general(
+                      fontSize: FontSizes.s14,
                      color: theme.main2,
-                      fontSize: 14,
-                      decoration: TextDecoration.underline,
-                    ),
+                    ).underline,
                  ),
                ),
              ),
--- a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart
+++ b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart
@ -7,6 +7,7 @@ import 'package:app_flowy/plugins/grid/presentation/widgets/toolbar/grid_propert
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
@ -108,8 +109,7 @@ class _SettingItem extends StatelessWidget {
        isSelected: isSelected,
        text: FlowyText.medium(
          action.title(),
-          fontSize: 12,
-          color: theme.textColor,
+          fontSize: FontSizes.s12,
        ),
        hoverColor: theme.hover,
        onTap: () {
--- a/frontend/app_flowy/lib/plugins/doc/document.dart
+++ b/frontend/app_flowy/lib/plugins/doc/document.dart
@ -187,7 +187,7 @@ class ShareActionList extends StatelessWidget {
      buildChild: (controller) {
        return RoundedTextButton(
          title: LocaleKeys.shareAction_buttonText.tr(),
-          fontSize: 12,
+          fontSize: FontSizes.s12,
          borderRadius: Corners.s6Border,
          color: theme.main1,
          onPressed: () => controller.show(),
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart
@ -1,4 +1,5 @@
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
@ -7,6 +8,7 @@ import 'package:flowy_infra/size.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';

 import 'cell_builder.dart';

@ -72,6 +74,7 @@ class _PrimaryCellAccessoryState extends State<PrimaryCellAccessory>
      final theme = context.watch<AppTheme>();
      return Tooltip(
        message: LocaleKeys.tooltip_openAsPage.tr(),
+        textStyle: TextStyles.caption.textColor(Colors.white),
        child: svgWidget(
          "grid/expander",
          color: theme.main1,
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart
@ -1,3 +1,4 @@
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/widgets.dart';
@ -78,7 +79,10 @@ class _DateCellState extends GridCellState<GridDateCell> {
                  alignment: alignment,
                  child: Padding(
                    padding: GridSize.cellContentInsets,
-                    child: FlowyText.medium(state.dateStr, fontSize: 12),
+                    child: FlowyText.medium(
+                      state.dateStr,
+                      fontSize: FontSizes.s14,
+                    ),
                  ),
                ),
              ),
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart
@ -7,6 +7,8 @@ import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:dartz/dartz.dart' show Either;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
@ -20,6 +22,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:table_calendar/table_calendar.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 import '../../../layout/sizes.dart';
 import '../../header/type_option/date.dart';

@ -163,6 +166,7 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
          headerStyle: HeaderStyle(
            formatButtonVisible: false,
            titleCentered: true,
+            titleTextStyle: TextStyles.body1.size(FontSizes.s14),
            leftChevronMargin: EdgeInsets.zero,
            leftChevronPadding: EdgeInsets.zero,
            leftChevronIcon: svgWidget("home/arrow_left"),
@ -174,12 +178,14 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
          daysOfWeekStyle: DaysOfWeekStyle(
            dowTextFormatter: (date, locale) =>
                DateFormat.E(locale).format(date).toUpperCase(),
-            weekdayStyle: TextStyle(
+            weekdayStyle: TextStyles.general(
              fontSize: 13,
+              fontWeight: FontWeight.w400,
              color: theme.shader3,
            ),
-            weekendStyle: TextStyle(
+            weekendStyle: TextStyles.general(
              fontSize: 13,
+              fontWeight: FontWeight.w400,
              color: theme.shader3,
            ),
          ),
@ -210,13 +216,19 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
              shape: BoxShape.rectangle,
              borderRadius: const BorderRadius.all(Radius.circular(6)),
            ),
-            selectedTextStyle: TextStyle(
+            defaultTextStyle: TextStyles.body1.size(FontSizes.s14),
+            weekendTextStyle: TextStyles.body1.size(FontSizes.s14),
+            selectedTextStyle: TextStyles.general(
+              fontSize: FontSizes.s14,
              color: theme.surface,
-              fontSize: 14.0,
            ),
-            todayTextStyle: TextStyle(
+            todayTextStyle: TextStyles.general(
+              fontSize: FontSizes.s14,
              color: theme.surface,
-              fontSize: 14.0,
+            ),
+            outsideTextStyle: TextStyles.general(
+              fontSize: FontSizes.s14,
+              color: theme.shader4,
            ),
          ),
          selectedDayPredicate: (day) {
@ -261,8 +273,10 @@ class _IncludeTimeButton extends StatelessWidget {
              children: [
                svgWidget("grid/clock", color: theme.iconColor),
                const HSpace(4),
-                FlowyText.medium(LocaleKeys.grid_field_includeTime.tr(),
-                    fontSize: 14),
+                FlowyText.medium(
+                  LocaleKeys.grid_field_includeTime.tr(),
+                  fontSize: FontSizes.s14,
+                ),
                const Spacer(),
                Toggle(
                  value: includeTime,
@ -340,7 +354,7 @@ class _TimeTextFieldState extends State<_TimeTextField> {
              autoFocus: true,
              hintText: state.timeHintText,
              controller: _controller,
-              style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+              style: TextStyles.body1.size(FontSizes.s14),
              normalBorderColor: theme.shader4,
              errorBorderColor: theme.red,
              focusBorderColor: theme.main1,
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/number_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/number_cell.dart
@ -1,8 +1,11 @@
 import 'dart:async';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
+import 'package:flowy_infra/size.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 '../../layout/sizes.dart';
 import 'cell_builder.dart';
@ -54,7 +57,7 @@ class _NumberCellState extends GridFocusNodeCellState<GridNumberCell> {
            onEditingComplete: () => focusNode.unfocus(),
            onSubmitted: (_) => focusNode.unfocus(),
            maxLines: 1,
-            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            style: TextStyles.body1.size(FontSizes.s14),
            textInputAction: TextInputAction.done,
            decoration: const InputDecoration(
              contentPadding: EdgeInsets.zero,
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart
@ -1,6 +1,7 @@
 import 'dart:collection';

 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/select_type_option.pb.dart';
 import 'package:flutter/gestures.dart';
@ -10,6 +11,7 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:textfield_tags/textfield_tags.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';

 import 'extension.dart';

@ -104,7 +106,7 @@ class _SelectOptionTextFieldState extends State<SelectOptionTextField> {
            maxLength: widget.maxLength,
            maxLengthEnforcement:
                MaxLengthEnforcement.truncateAfterCompositionEnds,
-            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            style: TextStyles.body1.size(FontSizes.s14),
            decoration: InputDecoration(
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: theme.main1, width: 1.0),
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/text_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/text_cell.dart
@ -1,10 +1,13 @@
 import 'dart:async';
 import 'package:app_flowy/plugins/grid/presentation/widgets/cell/prelude.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
 import '../../layout/sizes.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 import 'cell_builder.dart';

 class GridTextCellStyle extends GridCellStyle {
@ -69,7 +72,7 @@ class _GridTextCellState extends GridFocusNodeCellState<GridTextCell> {
            onChanged: (value) => focusChanged(),
            onEditingComplete: () => focusNode.unfocus(),
            maxLines: null,
-            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            style: TextStyles.body1.size(FontSizes.s14),
            decoration: InputDecoration(
              contentPadding: EdgeInsets.only(
                top: GridSize.cellContentInsets.top,
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/cell_editor.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/cell_editor.dart
@ -1,9 +1,12 @@
 import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
 import 'package:app_flowy/plugins/grid/application/cell/url_cell_editor_bloc.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flutter/material.dart';
 import 'dart:async';

 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';

 class URLCellEditor extends StatefulWidget {
  final GridURLCellController cellController;
@ -42,7 +45,7 @@ class _URLCellEditorState extends State<URLCellEditor> {
          controller: _controller,
          onChanged: (value) => focusChanged(),
          maxLines: null,
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+          style: TextStyles.body1.size(FontSizes.s14),
          decoration: const InputDecoration(
            contentPadding: EdgeInsets.zero,
            border: InputBorder.none,
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart
@ -5,12 +5,15 @@ import 'package:app_flowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 import 'package:url_launcher/url_launcher.dart';
 import '../../../layout/sizes.dart';
 import '../cell_accessory.dart';
@ -122,11 +125,10 @@ class _GridURLCellState extends GridCellState<GridURLCell> {
              textAlign: TextAlign.left,
              text: TextSpan(
                text: state.content,
-                style: TextStyle(
+                style: TextStyles.general(
+                  fontSize: FontSizes.s14,
                  color: theme.main2,
-                  fontSize: 14,
-                  decoration: TextDecoration.underline,
-                ),
+                ).underline,
              ),
            ),
          );
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/common/text_field.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/common/text_field.dart
@ -1,7 +1,9 @@
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';

 class InputTextField extends StatefulWidget {
  final void Function(String)? onDone;
@ -51,7 +53,7 @@ class _InputTextFieldState extends State<InputTextField> {
      autoFocus: true,
      height: height,
      maxLength: widget.maxLength,
-      style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
+      style: TextStyles.body1.size(13),
      normalBorderColor: theme.shader4,
      focusBorderColor: theme.main1,
      cursorColor: theme.main1,
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
@ -4,6 +4,7 @@ import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:dartz/dartz.dart' show none;
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@ -188,7 +189,9 @@ class _FieldNameTextFieldState extends State<_FieldNameTextField> {
          return RoundedInputField(
            height: 36,
            focusNode: focusNode,
-            style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
+            style: TextStyles.general(
+              fontSize: 13,
+            ),
            controller: controller,
            normalBorderColor: theme.shader4,
            errorBorderColor: theme.red,
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option_editor.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option_editor.dart
@ -1,6 +1,7 @@
 import 'package:app_flowy/plugins/grid/application/field/type_option/edit_select_option_bloc.dart';
 import 'package:app_flowy/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
@ -126,6 +127,7 @@ class SelectOptionColorList extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
    final cells = SelectOptionColorPB.values.map((color) {
      return _SelectOptionColorCell(
          color: color, isSelected: selectedColor == color);
@ -141,8 +143,9 @@ class SelectOptionColorList extends StatelessWidget {
            height: GridSize.typeOptionItemHeight,
            child: FlowyText.medium(
              LocaleKeys.grid_selectOption_colorPanelTitle.tr(),
-              fontSize: 12,
+              fontSize: FontSizes.s12,
              textAlign: TextAlign.left,
+              color: theme.shader3,
            ),
          ),
        ),
--- a/frontend/app_flowy/lib/user/presentation/sign_in_screen.dart
+++ b/frontend/app_flowy/lib/user/presentation/sign_in_screen.dart
@ -4,7 +4,9 @@ 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/theme.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';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@ -16,6 +18,7 @@ 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;
@ -39,7 +42,8 @@ class SignInScreen extends StatelessWidget {
    );
  }

-  void _handleSuccessOrFail(Either<UserProfilePB, FlowyError> result, BuildContext context) {
+  void _handleSuccessOrFail(
+      Either<UserProfilePB, FlowyError> result, BuildContext context) {
    result.fold(
      (user) => router.pushWelcomeScreen(context, user),
      (error) => showSnapBar(context, error.msg),
@ -96,11 +100,13 @@ class SignUpPrompt extends StatelessWidget {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
-        Text(LocaleKeys.signIn_dontHaveAnAccount.tr(), style: TextStyle(color: theme.shader3, fontSize: 12)),
-        TextButton(
-          style: TextButton.styleFrom(
-            textStyle: const TextStyle(fontSize: 12),
+        FlowyText.medium(
+          LocaleKeys.signIn_dontHaveAnAccount.tr(),
+          fontSize: FontSizes.s12,
+          color: theme.shader3,
        ),
+        TextButton(
+          style: TextButton.styleFrom(textStyle: TextStyles.body1),
          onPressed: () => router.pushSignUpScreen(context),
          child: Text(
            LocaleKeys.signUp_buttonText.tr(),
@ -126,7 +132,9 @@ class LoginButton extends StatelessWidget {
      borderRadius: Corners.s10Border,
      color: theme.main1,
      onPressed: () {
-        context.read<SignInBloc>().add(const SignInEvent.signedInWithUserEmailAndPassword());
+        context
+            .read<SignInBloc>()
+            .add(const SignInEvent.signedInWithUserEmailAndPassword());
      },
    );
  }
@ -145,7 +153,7 @@ class ForgetPasswordButton extends StatelessWidget {
    final theme = context.watch<AppTheme>();
    return TextButton(
      style: TextButton.styleFrom(
-        textStyle: const TextStyle(fontSize: 12),
+        textStyle: TextStyles.body1,
      ),
      onPressed: () => router.pushForgetPasswordScreen(context),
      child: Text(
@ -165,19 +173,26 @@ class PasswordTextField extends StatelessWidget {
  Widget build(BuildContext context) {
    final theme = context.watch<AppTheme>();
    return BlocBuilder<SignInBloc, SignInState>(
-      buildWhen: (previous, current) => previous.passwordError != current.passwordError,
+      buildWhen: (previous, current) =>
+          previous.passwordError != current.passwordError,
      builder: (context, state) {
        return RoundedInputField(
          obscureText: true,
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+          style: TextStyles.body1.size(FontSizes.s14),
          obscureIcon: svgWidget("home/hide"),
          obscureHideIcon: svgWidget("home/show"),
          hintText: LocaleKeys.signIn_passwordHint.tr(),
          normalBorderColor: theme.shader4,
          errorBorderColor: theme.red,
          cursorColor: theme.main1,
-          errorText: context.read<SignInBloc>().state.passwordError.fold(() => "", (error) => error),
-          onChanged: (value) => context.read<SignInBloc>().add(SignInEvent.passwordChanged(value)),
+          errorText: context
+              .read<SignInBloc>()
+              .state
+              .passwordError
+              .fold(() => "", (error) => error),
+          onChanged: (value) => context
+              .read<SignInBloc>()
+              .add(SignInEvent.passwordChanged(value)),
        );
      },
    );
@ -193,16 +208,22 @@ class EmailTextField extends StatelessWidget {
  Widget build(BuildContext context) {
    final theme = context.watch<AppTheme>();
    return BlocBuilder<SignInBloc, SignInState>(
-      buildWhen: (previous, current) => previous.emailError != current.emailError,
+      buildWhen: (previous, current) =>
+          previous.emailError != current.emailError,
      builder: (context, state) {
        return RoundedInputField(
          hintText: LocaleKeys.signIn_emailHint.tr(),
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+          style: TextStyles.body1.size(FontSizes.s14),
          normalBorderColor: theme.shader4,
          errorBorderColor: theme.red,
          cursorColor: theme.main1,
-          errorText: context.read<SignInBloc>().state.emailError.fold(() => "", (error) => error),
-          onChanged: (value) => context.read<SignInBloc>().add(SignInEvent.emailChanged(value)),
+          errorText: context
+              .read<SignInBloc>()
+              .state
+              .emailError
+              .fold(() => "", (error) => error),
+          onChanged: (value) =>
+              context.read<SignInBloc>().add(SignInEvent.emailChanged(value)),
        );
      },
    );
--- a/frontend/app_flowy/lib/user/presentation/sign_up_screen.dart
+++ b/frontend/app_flowy/lib/user/presentation/sign_up_screen.dart
@ -3,6 +3,8 @@ 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/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
@ -15,6 +17,7 @@ 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;
@ -36,7 +39,8 @@ class SignUpScreen extends StatelessWidget {
    );
  }

-  void _handleSuccessOrFail(BuildContext context, Either<UserProfilePB, FlowyError> result) {
+  void _handleSuccessOrFail(
+      BuildContext context, Either<UserProfilePB, FlowyError> result) {
    result.fold(
      (user) => router.pushWelcomeScreen(context, user),
      (error) => showSnapBar(context, error.msg),
@ -93,9 +97,10 @@ class SignUpPrompt extends StatelessWidget {
          style: TextStyle(color: theme.shader3, fontSize: 12),
        ),
        TextButton(
-          style: TextButton.styleFrom(textStyle: const TextStyle(fontSize: 12)),
+          style: TextButton.styleFrom(textStyle: TextStyles.body1),
          onPressed: () => Navigator.pop(context),
-          child: Text(LocaleKeys.signIn_buttonText.tr(), style: TextStyle(color: theme.main1)),
+          child: Text(LocaleKeys.signIn_buttonText.tr(),
+              style: TextStyle(color: theme.main1)),
        ),
      ],
    );
@ -115,7 +120,9 @@ class SignUpButton extends StatelessWidget {
      height: 48,
      color: theme.main1,
      onPressed: () {
-        context.read<SignUpBloc>().add(const SignUpEvent.signUpWithUserEmailAndPassword());
+        context
+            .read<SignUpBloc>()
+            .add(const SignUpEvent.signUpWithUserEmailAndPassword());
      },
    );
  }
@ -130,19 +137,26 @@ class PasswordTextField extends StatelessWidget {
  Widget build(BuildContext context) {
    final theme = context.watch<AppTheme>();
    return BlocBuilder<SignUpBloc, SignUpState>(
-      buildWhen: (previous, current) => previous.passwordError != current.passwordError,
+      buildWhen: (previous, current) =>
+          previous.passwordError != current.passwordError,
      builder: (context, state) {
        return RoundedInputField(
          obscureText: true,
          obscureIcon: svgWidget("home/hide"),
          obscureHideIcon: svgWidget("home/show"),
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+          style: TextStyles.body1.size(FontSizes.s14),
          hintText: LocaleKeys.signUp_passwordHint.tr(),
          normalBorderColor: theme.shader4,
          errorBorderColor: theme.red,
          cursorColor: theme.main1,
-          errorText: context.read<SignUpBloc>().state.passwordError.fold(() => "", (error) => error),
-          onChanged: (value) => context.read<SignUpBloc>().add(SignUpEvent.passwordChanged(value)),
+          errorText: context
+              .read<SignUpBloc>()
+              .state
+              .passwordError
+              .fold(() => "", (error) => error),
+          onChanged: (value) => context
+              .read<SignUpBloc>()
+              .add(SignUpEvent.passwordChanged(value)),
        );
      },
    );
@ -158,19 +172,26 @@ class RepeatPasswordTextField extends StatelessWidget {
  Widget build(BuildContext context) {
    final theme = context.watch<AppTheme>();
    return BlocBuilder<SignUpBloc, SignUpState>(
-      buildWhen: (previous, current) => previous.repeatPasswordError != current.repeatPasswordError,
+      buildWhen: (previous, current) =>
+          previous.repeatPasswordError != current.repeatPasswordError,
      builder: (context, state) {
        return RoundedInputField(
          obscureText: true,
          obscureIcon: svgWidget("home/hide"),
          obscureHideIcon: svgWidget("home/show"),
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+          style: TextStyles.body1.size(FontSizes.s14),
          hintText: LocaleKeys.signUp_repeatPasswordHint.tr(),
          normalBorderColor: theme.shader4,
          errorBorderColor: theme.red,
          cursorColor: theme.main1,
-          errorText: context.read<SignUpBloc>().state.repeatPasswordError.fold(() => "", (error) => error),
-          onChanged: (value) => context.read<SignUpBloc>().add(SignUpEvent.repeatPasswordChanged(value)),
+          errorText: context
+              .read<SignUpBloc>()
+              .state
+              .repeatPasswordError
+              .fold(() => "", (error) => error),
+          onChanged: (value) => context
+              .read<SignUpBloc>()
+              .add(SignUpEvent.repeatPasswordChanged(value)),
        );
      },
    );
@ -186,7 +207,8 @@ class EmailTextField extends StatelessWidget {
  Widget build(BuildContext context) {
    final theme = context.watch<AppTheme>();
    return BlocBuilder<SignUpBloc, SignUpState>(
-      buildWhen: (previous, current) => previous.emailError != current.emailError,
+      buildWhen: (previous, current) =>
+          previous.emailError != current.emailError,
      builder: (context, state) {
        return RoundedInputField(
          hintText: LocaleKeys.signUp_emailHint.tr(),
@ -194,8 +216,13 @@ class EmailTextField extends StatelessWidget {
          normalBorderColor: theme.shader4,
          errorBorderColor: theme.red,
          cursorColor: theme.main1,
-          errorText: context.read<SignUpBloc>().state.emailError.fold(() => "", (error) => error),
-          onChanged: (value) => context.read<SignUpBloc>().add(SignUpEvent.emailChanged(value)),
+          errorText: context
+              .read<SignUpBloc>()
+              .state
+              .emailError
+              .fold(() => "", (error) => error),
+          onChanged: (value) =>
+              context.read<SignUpBloc>().add(SignUpEvent.emailChanged(value)),
        );
      },
    );
--- a/frontend/app_flowy/lib/user/presentation/skip_log_in_screen.dart
+++ b/frontend/app_flowy/lib/user/presentation/skip_log_in_screen.dart
@ -3,6 +3,7 @@ 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/theme.dart';
 import 'package:flowy_infra/uuid.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
@ -14,6 +15,7 @@ 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:flutter_bloc/flutter_bloc.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';
@ -63,7 +65,7 @@ class _SkipLogInScreenState extends State<SkipLogInScreen> {
            InkWell(
              child: Text(
                LocaleKeys.githubStarText.tr(),
-                style: const TextStyle(decoration: TextDecoration.underline, color: Colors.blue),
+                style: TextStyles.general(color: Colors.blue).underline,
              ),
              onTap: () {
                _launchURL('https://github.com/AppFlowy-IO/appflowy');
@ -72,7 +74,7 @@ class _SkipLogInScreenState extends State<SkipLogInScreen> {
            InkWell(
              child: Text(
                LocaleKeys.subscribeNewsletterText.tr(),
-                style: const TextStyle(decoration: TextDecoration.underline, color: Colors.blue),
+                style: TextStyles.general(color: Colors.blue).underline,
              ),
              onTap: () {
                _launchURL('https://www.appflowy.io/blog');
--- a/frontend/app_flowy/lib/user/presentation/widgets/background.dart
+++ b/frontend/app_flowy/lib/user/presentation/widgets/background.dart
@ -1,10 +1,9 @@
 import 'dart:math';

 import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';

 class AuthFormContainer extends StatelessWidget {
  final List<Widget> children;
@ -37,7 +36,6 @@ class FlowyLogoTitle extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final theme = context.watch<AppTheme>();
    return SizedBox(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
@ -47,14 +45,10 @@ class FlowyLogoTitle extends StatelessWidget {
            child: svgWidget("flowy_logo"),
          ),
          const VSpace(30),
-          Text(
+          FlowyText.semibold(
            title,
-            style: TextStyle(
-              color: theme.textColor,
-              fontWeight: FontWeight.w600,
            fontSize: 24,
          ),
-          )
        ],
      ),
    );
--- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/create_button.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/create_button.dart
@ -17,7 +17,8 @@ class NewAppButton extends StatelessWidget {
  Widget build(BuildContext context) {
    final child = FlowyTextButton(
      LocaleKeys.newPageText.tr(),
-      fontSize: 12,
+      fontSize: FontSizes.s12,
+      fontWeight: FontWeight.w500,
      onPressed: () async => await _showCreateAppDialog(context),
      heading: svgWithSize("home/new_app", const Size(16, 16)),
      padding: EdgeInsets.symmetric(horizontal: Insets.l, vertical: 20),
--- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart
@ -4,6 +4,7 @@ import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:expandable/expandable.dart';
 import 'package:flowy_infra/icon_data.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder/app.pb.dart';
@ -13,6 +14,7 @@ import 'package:app_flowy/workspace/application/app/app_bloc.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';

 import '../menu_app.dart';
 import 'add_button.dart';
@ -102,6 +104,7 @@ class MenuAppHeader extends StatelessWidget {
  Widget _renderCreateViewButton(BuildContext context) {
    return Tooltip(
      message: LocaleKeys.menuAppHeader_addPageTooltip.tr(),
+      textStyle: TextStyles.caption.textColor(Colors.white),
      child: AddButton(
        onSelected: (pluginBuilder) {
          context.read<AppBloc>().add(
--- a/frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart
@ -2,7 +2,6 @@ export './app/header/header.dart';
 export './app/menu_app.dart';

 import 'dart:io' show Platform;
-import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/plugins/trash/menu.dart';
 import 'package:app_flowy/workspace/presentation/home/home_sizes.dart';
 import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
@ -26,8 +25,8 @@ import 'package:app_flowy/core/frameless_window.dart';
 // import 'package:app_flowy/workspace/presentation/home/home_sizes.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
-import 'package:easy_localization/easy_localization.dart';

+import '../navigation.dart';
 import 'app/menu_app.dart';
 import 'app/create_button.dart';
 import 'menu_user.dart';
@ -222,13 +221,7 @@ class MenuTopBar extends StatelessWidget {
              renderIcon(context),
              const Spacer(),
              Tooltip(
-                  richMessage: TextSpan(children: [
-                    TextSpan(text: "${LocaleKeys.sideBar_closeSidebar.tr()}\n"),
-                    TextSpan(
-                      text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
-                      style: const TextStyle(color: Colors.white60),
-                    ),
-                  ]),
+                  richMessage: sidebarTooltipTextSpan(),
                  child: FlowyIconButton(
                    width: 28,
                    onPressed: () => context
--- a/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart
@ -4,6 +4,7 @@ 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/image.dart';
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@ -12,6 +13,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';

 class MenuUser extends StatelessWidget {
  final UserProfilePB user;
@ -64,7 +66,11 @@ class MenuUser extends StatelessWidget {
    if (name.isEmpty) {
      name = context.read<MenuUserBloc>().state.userProfile.email;
    }
-    return FlowyText(name, fontSize: 12, overflow: TextOverflow.ellipsis);
+    return FlowyText.medium(
+      name,
+      fontSize: FontSizes.s12,
+      overflow: TextOverflow.ellipsis,
+    );
  }

  Widget _renderSettingsButton(BuildContext context) {
@ -72,6 +78,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),
      child: IconButton(
        onPressed: () {
          showDialog(
--- a/frontend/app_flowy/lib/workspace/presentation/home/navigation.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/navigation.dart
@ -5,6 +5,8 @@ import 'package:app_flowy/workspace/application/home/home_bloc.dart';
 import 'package:app_flowy/workspace/presentation/home/home_stack.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/theme.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@ -100,13 +102,7 @@ class FlowyNavigation extends StatelessWidget {
            return RotationTransition(
              turns: const AlwaysStoppedAnimation(180 / 360),
              child: Tooltip(
-                  richMessage: TextSpan(children: [
-                    TextSpan(text: "${LocaleKeys.sideBar_openSidebar.tr()}\n"),
-                    TextSpan(
-                      text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
-                      style: const TextStyle(color: Colors.white60),
-                    ),
-                  ]),
+                  richMessage: sidebarTooltipTextSpan(),
                  child: FlowyIconButton(
                    width: 24,
                    onPressed: () {
@ -198,3 +194,19 @@ class EllipsisNaviItem extends NavigationItem {
  @override
  NavigationCallback get action => (id) {};
 }
+
+TextSpan sidebarTooltipTextSpan() => TextSpan(
+      children: [
+        TextSpan(
+          text: "${LocaleKeys.sideBar_openSidebar.tr()}\n",
+          style: TextStyles.caption,
+        ),
+        TextSpan(
+          text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
+          style: TextStyles.general(
+            fontSize: FontSizes.s11,
+            color: Colors.white60,
+          ),
+        ),
+      ],
+    );
--- a/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart
@ -7,6 +7,7 @@ import 'package:app_flowy/workspace/presentation/settings/widgets/settings_user_
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_menu.dart';
 import 'package:app_flowy/workspace/application/settings/settings_dialog_bloc.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
@ -35,11 +36,10 @@ class SettingsDialog extends StatelessWidget {
            builder: (context, state) => ChangeNotifierProvider.value(
                  value: Provider.of<AppearanceSetting>(context, listen: true),
                  child: FlowyDialog(
-                    title: Text(
+                    title: FlowyText(
                      LocaleKeys.settings_title.tr(),
-                      style: const TextStyle(
-                        fontWeight: FontWeight.bold,
-                      ),
+                      fontSize: 20,
+                      fontWeight: FontWeight.w700,
                    ),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
@ -62,14 +62,12 @@ class SettingsDialog extends StatelessWidget {
                        const SizedBox(width: 10),
                        Expanded(
                          child: getSettingsView(
+                            context.read<SettingsDialogBloc>().state.viewIndex,
                            context
                                .read<SettingsDialogBloc>()
                                .state
-                                  .viewIndex,
-                              context
-                                  .read<SettingsDialogBloc>()
-                                  .state
-                                  .userProfile),
+                                .userProfile,
+                          ),
                        )
                      ],
                    ),
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
@ -2,9 +2,12 @@ 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/text_style.dart';
 import 'package:flowy_infra/theme.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';

@ -23,10 +26,7 @@ class SettingsAppearanceView extends StatelessWidget {
            children: [
              Text(
                LocaleKeys.settings_appearance_lightLabel.tr(),
-                style: const TextStyle(
-                  fontSize: 14,
-                  fontWeight: FontWeight.w500,
-                ),
+                style: TextStyles.body1.size(FontSizes.s14),
              ),
              Toggle(
                value: theme.isDark,
@ -35,10 +35,7 @@ class SettingsAppearanceView extends StatelessWidget {
              ),
              Text(
                LocaleKeys.settings_appearance_darkLabel.tr(),
-                style: const TextStyle(
-                  fontSize: 14,
-                  fontWeight: FontWeight.w500,
-                ),
+                style: TextStyles.body1.size(FontSizes.s14),
              ),
            ],
          ),
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart
@ -1,10 +1,13 @@
 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/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_infra/language.dart';
 import 'package:provider/provider.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';

 class SettingsLanguageView extends StatelessWidget {
  const SettingsLanguageView({Key? key}) : super(key: key);
@ -22,10 +25,7 @@ class SettingsLanguageView extends StatelessWidget {
              children: [
                Text(
                  LocaleKeys.settings_menu_language.tr(),
-                  style: const TextStyle(
-                    fontSize: 14,
-                    fontWeight: FontWeight.w500,
-                  ),
+                  style: TextStyles.body1.size(FontSizes.s14),
                ),
                const LanguageSelectorDropdown(),
              ],
@ -96,11 +96,7 @@ class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
                  padding: const EdgeInsets.all(12.0),
                  child: Text(
                    languageFromLocale(locale),
-                    style: TextStyle(
-                      fontSize: 14,
-                      fontWeight: FontWeight.w500,
-                      color: theme.textColor,
-                    ),
+                    style: TextStyles.body1.size(FontSizes.s14),
                  ),
                ),
              );
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu_element.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu_element.dart
@ -1,4 +1,6 @@
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

@ -37,14 +39,11 @@ class SettingsMenuElement extends StatelessWidget {
        borderRadius: BorderRadius.circular(5),
      ),
      minLeadingWidth: 0,
-      title: Text(
+      title: FlowyText.semibold(
        label,
-        style: const TextStyle(
-          fontSize: 14,
-          fontWeight: FontWeight.w600,
+        fontSize: FontSizes.s14,
        overflow: TextOverflow.ellipsis,
      ),
-      ),
    );
  }
 }
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_user_view.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_user_view.dart
@ -1,4 +1,5 @@
 import 'package:app_flowy/startup/startup.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:app_flowy/workspace/application/user/settings_user_bloc.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@ -92,7 +93,7 @@ class _CurrentIcon extends StatelessWidget {
              context: context,
              builder: (BuildContext context) {
                return SimpleDialog(
-                    title: const Text('Select an Icon'),
+                    title: const FlowyText.medium('Select an Icon'),
                    children: <Widget>[
                      SizedBox(
                          height: 300, width: 300, child: IconGallery(_setIcon))
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/dialogs.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/widgets/dialogs.dart
@ -11,7 +11,6 @@ import 'package:app_flowy/startup/tasks/app_widget.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/style_widget/text_input.dart';
 import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 export 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';

@ -56,8 +55,10 @@ class _CreateTextFieldDialog extends State<NavigatorTextFieldDialog> {
          FlowyFormTextInput(
            hintText: LocaleKeys.dialogCreatePageNameHint.tr(),
            initialValue: widget.value,
-            textStyle:
-                const TextStyle(fontSize: 24, fontWeight: FontWeight.w400),
+            textStyle: TextStyles.general(
+              fontSize: 24,
+              fontWeight: FontWeight.w400,
+            ),
            autoFocus: true,
            onChanged: (text) {
              newValue = text;
@ -169,7 +170,7 @@ class NavigatorOkCancelDialog extends StatelessWidget {
            Container(color: theme.bg1, height: 1),
            VSpace(Insets.m * 1.5),
          ],
-          Text(message, style: TextStyles.Body1.textHeight(1.5)),
+          FlowyText.medium(message, fontSize: FontSizes.s12),
          SizedBox(height: Insets.l),
          OkCancelButton(
            onOkPressed: () {
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
@ -3,6 +3,7 @@ import 'package:app_flowy/workspace/presentation/home/toast.dart';
 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:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@ -128,8 +129,11 @@ class FlowyVersionDescription extends CustomActionCell {
      builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
-            return FlowyText("Error: ${snapshot.error}",
-                fontSize: 12, color: theme.shader4);
+            return FlowyText(
+              "Error: ${snapshot.error}",
+              fontSize: FontSizes.s12,
+              color: theme.shader4,
+            );
          }

          PackageInfo packageInfo = snapshot.data;
@ -147,7 +151,7 @@ class FlowyVersionDescription extends CustomActionCell {
                const VSpace(6),
                FlowyText(
                  "$appName $version.$buildNumber",
-                  fontSize: 12,
+                  fontSize: FontSizes.s12,
                  color: theme.shader4,
                ),
              ],
@ -170,7 +174,7 @@ class BubbleActionWrapper extends ActionCell {

  BubbleActionWrapper(this.inner);
  @override
-  Widget? icon(Color iconColor) => inner.emoji;
+  Widget? icon(Color iconColor) => FlowyText.regular(inner.emoji, fontSize: 12);

  @override
  String get name => inner.name;
@ -188,14 +192,14 @@ extension QuestionBubbleExtension on BubbleAction {
    }
  }

-  Widget get emoji {
+  String get emoji {
    switch (this) {
      case BubbleAction.whatsNews:
-        return const Text('⭐️', style: TextStyle(fontSize: 12));
+        return '⭐️';
      case BubbleAction.help:
-        return const Text('👥', style: TextStyle(fontSize: 12));
+        return '👥';
      case BubbleAction.debug:
-        return const Text('🐛', style: TextStyle(fontSize: 12));
+        return '🐛';
    }
  }
 }
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/left_bar_item.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/widgets/left_bar_item.dart
@ -1,15 +1,17 @@
 import 'package:app_flowy/workspace/application/view/view_listener.dart';
 import 'package:app_flowy/workspace/application/view/view_service.dart';
-import 'package:flowy_infra/theme.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:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';

 class ViewLeftBarItem extends StatefulWidget {
  final ViewPB view;

-  ViewLeftBarItem({required this.view, Key? key}) : super(key: ValueKey(view.hashCode));
+  ViewLeftBarItem({required this.view, Key? key})
+      : super(key: ValueKey(view.hashCode));

  @override
  State<ViewLeftBarItem> createState() => _ViewLeftBarItemState();
@ -54,7 +56,6 @@ class _ViewLeftBarItemState extends State<ViewLeftBarItem> {
  Widget build(BuildContext context) {
    _controller.text = view.name;

-    final theme = context.watch<AppTheme>();
    return IntrinsicWidth(
      key: ValueKey(_controller.text),
      child: TextField(
@ -66,12 +67,7 @@ class _ViewLeftBarItemState extends State<ViewLeftBarItem> {
          border: InputBorder.none,
          isDense: true,
        ),
-        style: TextStyle(
-          color: theme.textColor,
-          fontSize: 14,
-          fontWeight: FontWeight.w500,
-          overflow: TextOverflow.ellipsis,
-        ),
+        style: TextStyles.body1.size(FontSizes.s14),
        // cursorColor: widget.cursorColor,
        // obscureText: widget.enableObscure,
      ),
--- a/frontend/app_flowy/packages/flowy_infra/lib/text_style.dart
+++ b/frontend/app_flowy/packages/flowy_infra/lib/text_style.dart
@ -1,84 +1,73 @@
+import 'package:flowy_infra/size.dart';
 import 'package:flutter/material.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';

 class Fonts {
-  static const String lato = "Lato";
+  static String general = "Poppins";

-  static const String quicksand = "Quicksand";
+  static String monospace = "SF Mono";

-  static const String emoji = "OpenSansEmoji";
+  static String emoji = "Noto Color Emoji";
 }

-class FontSizes {
-  static double get scale => 1;
-
-  static double get s11 => 11 * scale;
-
-  static double get s12 => 12 * scale;
-
-  static double get s14 => 14 * scale;
-
-  static double get s16 => 16 * scale;
-
-  static double get s18 => 18 * scale;
-}
-
-// ignore: non_constant_identifier_names
 class TextStyles {
-  static const TextStyle lato = TextStyle(
-    fontFamily: Fonts.lato,
-    fontWeight: FontWeight.w400,
-    letterSpacing: 0,
-    height: 1,
-    fontFamilyFallback: [
-      Fonts.emoji,
-    ],
+  static TextStyle general({
+    double? fontSize,
+    FontWeight fontWeight = FontWeight.w500,
+    Color? color,
+  }) =>
+      TextStyle(
+        fontFamily: Fonts.general,
+        fontSize: fontSize ?? FontSizes.s12,
+        color: color,
+        fontWeight: fontWeight,
+        fontFamilyFallback: [Fonts.emoji],
+        letterSpacing: (fontSize ?? FontSizes.s12) * 0.005,
      );

-  static const TextStyle quicksand = TextStyle(
-    fontFamily: Fonts.quicksand,
-    fontWeight: FontWeight.w400,
-    fontFamilyFallback: [
-      Fonts.emoji,
-    ],
+  static TextStyle monospace({
+    String? fontFamily,
+    double? fontSize,
+    FontWeight fontWeight = FontWeight.w400,
+  }) =>
+      TextStyle(
+        fontFamily: fontFamily ?? Fonts.monospace,
+        fontSize: fontSize ?? FontSizes.s12,
+        fontWeight: fontWeight,
+        fontFamilyFallback: [Fonts.emoji],
      );

-  // ignore: non_constant_identifier_names
-  static TextStyle get T1 => quicksand.bold.size(FontSizes.s14).letterSpace(.7);
+  static TextStyle get title => general(
+        fontSize: FontSizes.s18,
+        fontWeight: FontWeight.w600,
+      );

-  // ignore: non_constant_identifier_names
-  static TextStyle get T2 => lato.bold.size(FontSizes.s12).letterSpace(.4);
+  static TextStyle get subheading => general(
+        fontSize: FontSizes.s16,
+        fontWeight: FontWeight.w600,
+      );

-  // ignore: non_constant_identifier_names
-  static TextStyle get H1 => lato.bold.size(FontSizes.s14);
+  static TextStyle get subtitle => general(
+        fontSize: FontSizes.s16,
+        fontWeight: FontWeight.w600,
+      );

-  // ignore: non_constant_identifier_names
-  static TextStyle get H2 => lato.bold.size(FontSizes.s12);
+  static TextStyle get body1 => general(
+        fontSize: FontSizes.s12,
+        fontWeight: FontWeight.w500,
+      );

-  // ignore: non_constant_identifier_names
-  static TextStyle get Body1 => lato.size(FontSizes.s14);
+  static TextStyle get body2 => general(
+        fontSize: FontSizes.s12,
+        fontWeight: FontWeight.w400,
+      );

-  // ignore: non_constant_identifier_names
-  static TextStyle get Body2 => lato.size(FontSizes.s12);
+  static TextStyle get callout => general(
+        fontSize: FontSizes.s11,
+        fontWeight: FontWeight.w600,
+      );

-  // ignore: non_constant_identifier_names
-  static TextStyle get Body3 => lato.size(FontSizes.s11);
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get Callout => quicksand.size(FontSizes.s14).letterSpace(1.75);
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get CalloutFocus => Callout.bold;
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get Btn => quicksand.bold.size(FontSizes.s16).letterSpace(1.75);
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get BtnSelected => quicksand.size(FontSizes.s14).letterSpace(1.75);
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get Footnote => quicksand.bold.size(FontSizes.s11);
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get Caption => lato.size(FontSizes.s11).letterSpace(.3);
+  static TextStyle get caption => general(
+        fontSize: FontSizes.s11,
+        fontWeight: FontWeight.w400,
+      );
 }
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart
@ -1,7 +1,9 @@
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';

 class FlowyButton extends StatelessWidget {
  final Widget text;
@ -147,6 +149,7 @@ class FlowyTextButton extends StatelessWidget {
    if (tooltip != null) {
      child = Tooltip(
        message: tooltip!,
+        textStyle: TextStyles.caption.textColor(Colors.white),
        child: child,
      );
    }
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart
@ -1,3 +1,4 @@
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@ -63,11 +64,10 @@ class FlowyText extends StatelessWidget {
      maxLines: maxLines,
      textAlign: textAlign,
      overflow: overflow ?? TextOverflow.clip,
-      style: TextStyle(
-        color: color ?? theme.textColor,
-        fontWeight: fontWeight,
+      style: TextStyles.general(
        fontSize: fontSize,
-        fontFamily: 'Mulish',
+        fontWeight: fontWeight,
+        color: color ?? theme.textColor,
      ),
    );
  }
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_input.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_input.dart
@ -10,7 +10,8 @@ import 'package:provider/provider.dart';
 import 'package:textstyle_extensions/textstyle_extensions.dart';

 class FlowyFormTextInput extends StatelessWidget {
-  static EdgeInsets kDefaultTextInputPadding = EdgeInsets.only(bottom: Insets.sm, top: 4);
+  static EdgeInsets kDefaultTextInputPadding =
+      EdgeInsets.only(bottom: Insets.sm, top: 4);

  final String? label;
  final bool? autoFocus;
@ -52,7 +53,7 @@ class FlowyFormTextInput extends StatelessWidget {
      initialValue: initialValue,
      onChanged: onChanged,
      onFocusCreated: onFocusCreated,
-      style: textStyle ?? TextStyles.Body1,
+      style: textStyle ?? TextStyles.body1,
      onEditingComplete: onEditingComplete,
      onFocusChanged: onFocusChanged,
      controller: controller,
@ -60,7 +61,8 @@ class FlowyFormTextInput extends StatelessWidget {
      inputDecoration: InputDecoration(
        isDense: true,
        contentPadding: contentPadding ?? kDefaultTextInputPadding,
-        border: const ThinUnderlineBorder(borderSide: BorderSide(width: 5, color: Colors.red)),
+        border: const ThinUnderlineBorder(
+            borderSide: BorderSide(width: 5, color: Colors.red)),
        //focusedBorder: UnderlineInputBorder(borderSide: BorderSide(width: .5, color: Colors.red)),
        hintText: hintText,
      ),
@ -141,7 +143,8 @@ class StyledSearchTextInputState extends State<StyledSearchTextInput> {

  @override
  void initState() {
-    _controller = widget.controller ?? TextEditingController(text: widget.initialValue);
+    _controller =
+        widget.controller ?? TextEditingController(text: widget.initialValue);
    _focusNode = FocusNode(
      debugLabel: widget.label ?? '',
      onKey: (FocusNode node, RawKeyEvent evt) {
@ -157,7 +160,8 @@ class StyledSearchTextInputState extends State<StyledSearchTextInput> {
      canRequestFocus: true,
    );
    // Listen for focus out events
-    _focusNode.addListener(() => widget.onFocusChanged?.call(_focusNode.hasFocus));
+    _focusNode
+        .addListener(() => widget.onFocusChanged?.call(_focusNode.hasFocus));
    widget.onFocusCreated?.call(_focusNode);
    if (widget.autoFocus ?? false) {
      scheduleMicrotask(() => _focusNode.requestFocus());
@ -195,7 +199,7 @@ class StyledSearchTextInputState extends State<StyledSearchTextInput> {
        obscureText: widget.obscureText ?? false,
        autocorrect: widget.autoCorrect ?? false,
        enableSuggestions: widget.enableSuggestions ?? false,
-        style: widget.style ?? TextStyles.Body1,
+        style: widget.style ?? TextStyles.body1,
        cursorColor: theme.main1,
        controller: _controller,
        showCursor: true,
@ -206,14 +210,15 @@ class StyledSearchTextInputState extends State<StyledSearchTextInput> {
            InputDecoration(
                prefixIcon: widget.prefixIcon,
                suffixIcon: widget.suffixIcon,
-                contentPadding: widget.contentPadding ?? EdgeInsets.all(Insets.m),
+                contentPadding:
+                    widget.contentPadding ?? EdgeInsets.all(Insets.m),
                border: const OutlineInputBorder(borderSide: BorderSide.none),
                isDense: true,
                icon: widget.icon == null ? null : Icon(widget.icon),
                errorText: widget.errorText,
                errorMaxLines: 2,
                hintText: widget.hintText,
-                hintStyle: TextStyles.Body1.textColor(theme.shader4),
+                hintStyle: TextStyles.body1.textColor(theme.shader4),
                labelText: widget.label),
      ),
    );
@ -254,7 +259,8 @@ class ThinUnderlineBorder extends InputBorder {
  bool get isOutline => false;

  @override
-  UnderlineInputBorder copyWith({BorderSide? borderSide, BorderRadius? borderRadius}) {
+  UnderlineInputBorder copyWith(
+      {BorderSide? borderSide, BorderRadius? borderRadius}) {
    return UnderlineInputBorder(
      borderSide: borderSide ?? this.borderSide,
      borderRadius: borderRadius ?? this.borderRadius,
@ -274,7 +280,8 @@ class ThinUnderlineBorder extends InputBorder {
  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    return Path()
-      ..addRect(Rect.fromLTWH(rect.left, rect.top, rect.width, math.max(0.0, rect.height - borderSide.width)));
+      ..addRect(Rect.fromLTWH(rect.left, rect.top, rect.width,
+          math.max(0.0, rect.height - borderSide.width)));
  }

  @override
@ -285,7 +292,8 @@ class ThinUnderlineBorder extends InputBorder {
  @override
  ShapeBorder? lerpFrom(ShapeBorder? a, double t) {
    if (a is UnderlineInputBorder) {
-      final newBorderRadius = BorderRadius.lerp(a.borderRadius, borderRadius, t);
+      final newBorderRadius =
+          BorderRadius.lerp(a.borderRadius, borderRadius, t);

      if (newBorderRadius != null) {
        return UnderlineInputBorder(
@ -300,7 +308,8 @@ class ThinUnderlineBorder extends InputBorder {
  @override
  ShapeBorder? lerpTo(ShapeBorder? b, double t) {
    if (b is UnderlineInputBorder) {
-      final newBorderRadius = BorderRadius.lerp(b.borderRadius, borderRadius, t);
+      final newBorderRadius =
+          BorderRadius.lerp(b.borderRadius, borderRadius, t);
      if (newBorderRadius != null) {
        return UnderlineInputBorder(
          borderSide: BorderSide.lerp(borderSide, b.borderSide, t),
@ -326,7 +335,8 @@ class ThinUnderlineBorder extends InputBorder {
    double gapPercentage = 0.0,
    TextDirection? textDirection,
  }) {
-    if (borderRadius.bottomLeft != Radius.zero || borderRadius.bottomRight != Radius.zero) {
+    if (borderRadius.bottomLeft != Radius.zero ||
+        borderRadius.bottomRight != Radius.zero) {
      canvas.clipPath(getOuterPath(rect, textDirection: textDirection));
    }
    canvas.drawLine(rect.bottomLeft, rect.bottomRight, borderSide.toPaint());
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
@ -106,7 +106,7 @@ class BaseStyledBtnState extends State<BaseStyledButton> {
      child: RawMaterialButton(
        focusNode: _focusNode,
        autofocus: widget.autoFocus,
-        textStyle: widget.useBtnText ? TextStyles.Btn : null,
+        textStyle: widget.useBtnText ? TextStyles.body1 : null,
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        // visualDensity: VisualDensity.compact,
        splashColor: Colors.transparent,
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart
@ -1,4 +1,5 @@
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flutter/material.dart';

 class RoundedTextButton extends StatelessWidget {
@ -45,7 +46,10 @@ class RoundedTextButton extends StatelessWidget {
            onPressed: onPressed,
            child: Text(
              title ?? '',
-              style: TextStyle(color: textColor, fontSize: fontSize),
+              style: TextStyles.general(
+                fontSize: fontSize,
+                color: textColor,
+              ),
            ),
          ),
        ),
@ -80,9 +84,8 @@ class RoundedImageButton extends StatelessWidget {
      child: TextButton(
        onPressed: press,
        style: ButtonStyle(
-            shape: MaterialStateProperty.all<RoundedRectangleBorder>(RoundedRectangleBorder(
-          borderRadius: borderRadius,
-        ))),
+            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                RoundedRectangleBorder(borderRadius: borderRadius))),
        child: child,
      ),
    );
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart
@ -1,8 +1,10 @@
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_infra/time/duration.dart';
 import 'package:flutter/services.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';

 class RoundedInputField extends StatefulWidget {
  final String? hintText;
@ -113,7 +115,7 @@ class _RoundedInputFieldState extends State<RoundedInputField> {
          decoration: InputDecoration(
            contentPadding: widget.contentPadding,
            hintText: widget.hintText,
-            hintStyle: TextStyle(color: widget.normalBorderColor),
+            hintStyle: TextStyles.body1.textColor(widget.normalBorderColor),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(
                color: borderColor,