chore: add textTheme to AppTheme (#1448)

* chore: add textTheme to AppTheme

* chore: extend scaled font size options

* chore: add text styles to extension and rename extension to AFThemeExtension

* chore: use 2021 material design text style tokens

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart

@@ -189,7 +189,7 @@ class _Background extends StatelessWidget {
           return FlowyHoverContainer(
             style: HoverStyle(
               borderRadius: Corners.s6Border,
-              hoverColor: CustomColors.of(context).lightGreyHover,
+              hoverColor: AFThemeExtension.of(context).lightGreyHover,
             ),
           );
         } else {
@@ -210,7 +210,8 @@ class CellAccessoryContainer extends StatelessWidget {
     final children =
         accessories.where((accessory) => accessory.enable()).map((accessory) {
       final hover = FlowyHover(
-        style: HoverStyle(hoverColor: CustomColors.of(context).lightGreyHover),
+        style:
+            HoverStyle(hoverColor: AFThemeExtension.of(context).lightGreyHover),
         builder: (_, onHover) => Container(
           width: 26,
           height: 26,

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart

@@ -201,7 +201,7 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
               borderRadius: const BorderRadius.all(Radius.circular(6)),
             ),
             todayDecoration: BoxDecoration(
-              color: CustomColors.of(context).lightGreyHover,
+              color: AFThemeExtension.of(context).lightGreyHover,
               shape: BoxShape.rectangle,
               borderRadius: const BorderRadius.all(Radius.circular(6)),
             ),

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart

@@ -10,23 +10,23 @@ extension SelectOptionColorExtension on SelectOptionColorPB {
   Color make(BuildContext context) {
     switch (this) {
       case SelectOptionColorPB.Purple:
-        return CustomColors.tint1;
+        return AFThemeExtension.tint1;
       case SelectOptionColorPB.Pink:
-        return CustomColors.tint2;
+        return AFThemeExtension.tint2;
       case SelectOptionColorPB.LightPink:
-        return CustomColors.tint3;
+        return AFThemeExtension.tint3;
       case SelectOptionColorPB.Orange:
-        return CustomColors.tint4;
+        return AFThemeExtension.tint4;
       case SelectOptionColorPB.Yellow:
-        return CustomColors.tint5;
+        return AFThemeExtension.tint5;
       case SelectOptionColorPB.Lime:
-        return CustomColors.tint6;
+        return AFThemeExtension.tint6;
       case SelectOptionColorPB.Green:
-        return CustomColors.tint7;
+        return AFThemeExtension.tint7;
       case SelectOptionColorPB.Aqua:
-        return CustomColors.tint8;
+        return AFThemeExtension.tint8;
       case SelectOptionColorPB.Blue:
-        return CustomColors.tint9;
+        return AFThemeExtension.tint9;
       default:
         throw ArgumentError;
     }

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart

@@ -214,7 +214,7 @@ class _CreateOptionCell extends StatelessWidget {
         const HSpace(10),
         SelectOptionTag(
           name: name,
-          color: CustomColors.of(context).lightGreyHover,
+          color: AFThemeExtension.of(context).lightGreyHover,
           onSelected: () => context
               .read<SelectOptionCellEditorBloc>()
               .add(SelectOptionEditorEvent.newOption(name)),

frontend/app_flowy/lib/plugins/grid/presentation/widgets/footer/grid_footer.dart

@@ -15,7 +15,7 @@ class GridAddRowButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return FlowyButton(
       text: FlowyText.medium(LocaleKeys.grid_row_newRow.tr(), fontSize: 12),
-      hoverColor: CustomColors.of(context).lightGreyHover,
+      hoverColor: AFThemeExtension.of(context).lightGreyHover,
       onTap: () => context.read<GridBloc>().add(const GridEvent.createRow()),
       leftIcon: svgWidget(
         "home/add",

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart

@@ -166,7 +166,7 @@ class FieldCellButton extends StatelessWidget {
         .replaceAll(Characters(''), Characters('\u{200B}'))
         .toString();
     return FlowyButton(
-      hoverColor: CustomColors.of(context).lightGreyHover,
+      hoverColor: AFThemeExtension.of(context).lightGreyHover,
       onTap: onTap,
       leftIcon: svgWidget(
         field.fieldType.iconName(),

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart

@@ -182,7 +182,7 @@ class CreateFieldButton extends StatelessWidget {
           LocaleKeys.grid_field_newColumn.tr(),
           fontSize: 12,
         ),
-        hoverColor: CustomColors.of(context).lightGreyHover,
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
         onTap: () {},
         leftIcon: svgWidget(
           "home/add",

frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart

@@ -202,7 +202,7 @@ class _CreateFieldButtonState extends State<_CreateFieldButton> {
             LocaleKeys.grid_field_newColumn.tr(),
             fontSize: 12,
           ),
-          hoverColor: CustomColors.of(context).lightGreyHover,
+          hoverColor: AFThemeExtension.of(context).lightGreyHover,
           onTap: () {},
           leftIcon: svgWidget("home/add"),
         ),