feat: introduce a default font (#1210)

* style: code auto-format

* feat: introduce default poppins font

* chore: port more const textstyles to shared styles

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,

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,
+                    ),
                   ),
                 ),
               ),

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,

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,

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),

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,

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,

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,
               ),
             ),
           );

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,

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,

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,
             ),
           ),
         ),