From f00a78746e54e7c5f5d130c38731ecff80663066 Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Thu, 17 Nov 2022 15:28:57 +0800 Subject: [PATCH] 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 --- .../widgets/cell/cell_accessory.dart | 5 +- .../widgets/cell/date_cell/date_editor.dart | 2 +- .../cell/select_option_cell/extension.dart | 18 +++--- .../select_option_editor.dart | 2 +- .../widgets/footer/grid_footer.dart | 2 +- .../widgets/header/field_cell.dart | 2 +- .../widgets/header/grid_header.dart | 2 +- .../presentation/widgets/row/row_detail.dart | 2 +- .../lib/user/presentation/welcome_screen.dart | 4 +- .../home/menu/app/section/item.dart | 2 +- .../presentation/widgets/toggle/toggle.dart | 2 +- .../flowy_infra/lib/color_extension.dart | 36 ++++++++--- .../packages/flowy_infra/lib/size.dart | 8 +++ .../packages/flowy_infra/lib/text_style.dart | 62 +++++++++++++++++++ .../packages/flowy_infra/lib/theme.dart | 21 +++++-- .../scrolling/styled_scroll_bar.dart | 8 +-- 16 files changed, 138 insertions(+), 40 deletions(-) diff --git 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 index f2c235afec..ba2541f780 100644 --- 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 @@ -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, diff --git 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 index dfd677f4b6..822b989da9 100644 --- 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 @@ -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)), ), diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart index aade71ab28..90aac52592 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart +++ b/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; } diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart index 0c79daf620..06fc419460 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart +++ b/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() .add(SelectOptionEditorEvent.newOption(name)), diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/footer/grid_footer.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/footer/grid_footer.dart index ca1daa7c71..9d1f98346d 100755 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/footer/grid_footer.dart +++ b/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().add(const GridEvent.createRow()), leftIcon: svgWidget( "home/add", diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart index 011239d9b9..270cdf17af 100755 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart +++ b/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(), diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart index ddb263003e..76ac94ac08 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart +++ b/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", diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart index 404b724154..d8f7786ca1 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart +++ b/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"), ), diff --git a/frontend/app_flowy/lib/user/presentation/welcome_screen.dart b/frontend/app_flowy/lib/user/presentation/welcome_screen.dart index f532981cdf..3525b5c252 100644 --- a/frontend/app_flowy/lib/user/presentation/welcome_screen.dart +++ b/frontend/app_flowy/lib/user/presentation/welcome_screen.dart @@ -56,7 +56,7 @@ class WelcomeScreen extends StatelessWidget { child: FlowyTextButton( LocaleKeys.workspace_create.tr(), fontSize: 14, - hoverColor: CustomColors.of(context).lightGreyHover, + hoverColor: AFThemeExtension.of(context).lightGreyHover, onPressed: () { context.read().add( WelcomeEvent.createWorkspace(LocaleKeys.workspace_hint.tr(), "")); @@ -100,7 +100,7 @@ class WorkspaceItem extends StatelessWidget { height: 46, child: FlowyTextButton( workspace.name, - hoverColor: CustomColors.of(context).lightGreyHover, + hoverColor: AFThemeExtension.of(context).lightGreyHover, fontSize: 14, onPressed: () => onPressed(workspace), ), diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart index 9d0aa624a6..3938eeb3f3 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart @@ -51,7 +51,7 @@ class ViewSectionItem extends StatelessWidget { onTap: () => onSelected(blocContext.read().state.view), child: FlowyHover( style: HoverStyle( - hoverColor: CustomColors.of(context).greySelect, + hoverColor: AFThemeExtension.of(context).greySelect, ), // If current state.isEditing is true, the hover should not // rebuild when onEnter/onExit events happened. diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart index 07285106e9..76952fc21b 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart @@ -26,7 +26,7 @@ class Toggle extends StatelessWidget { Widget build(BuildContext context) { final backgroundColor = value ? activeBackgroundColor ?? Theme.of(context).colorScheme.primary - : activeBackgroundColor ?? CustomColors.of(context).toggleOffFill; + : activeBackgroundColor ?? AFThemeExtension.of(context).toggleOffFill; return GestureDetector( onTap: (() => onChanged(value)), child: Padding( diff --git a/frontend/app_flowy/packages/flowy_infra/lib/color_extension.dart b/frontend/app_flowy/packages/flowy_infra/lib/color_extension.dart index 451d745ef5..4263cadd27 100644 --- a/frontend/app_flowy/packages/flowy_infra/lib/color_extension.dart +++ b/frontend/app_flowy/packages/flowy_infra/lib/color_extension.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; @immutable -class CustomColors extends ThemeExtension { +class AFThemeExtension extends ThemeExtension { final Color? warning; final Color? success; @@ -20,51 +20,67 @@ class CustomColors extends ThemeExtension { final Color lightGreyHover; final Color toggleOffFill; - const CustomColors({ + final TextStyle code; + final TextStyle callout; + final TextStyle caption; + + const AFThemeExtension({ required this.warning, required this.success, required this.greyHover, required this.greySelect, required this.lightGreyHover, required this.toggleOffFill, + required this.code, + required this.callout, + required this.caption, }); - static CustomColors of(BuildContext context) { - return Theme.of(context).extension()!; + static AFThemeExtension of(BuildContext context) { + return Theme.of(context).extension()!; } @override - CustomColors copyWith({ + AFThemeExtension copyWith({ Color? warning, Color? success, Color? greyHover, Color? greySelect, Color? lightGreyHover, Color? toggleOffFill, + TextStyle? code, + TextStyle? callout, + TextStyle? caption, }) { - return CustomColors( + return AFThemeExtension( warning: warning ?? this.warning, success: success ?? this.success, greyHover: greyHover ?? this.greyHover, greySelect: greySelect ?? this.greySelect, lightGreyHover: lightGreyHover ?? this.lightGreyHover, toggleOffFill: toggleOffFill ?? this.toggleOffFill, + code: code ?? this.code, + callout: callout ?? this.callout, + caption: caption ?? this.caption, ); } @override - ThemeExtension lerp( - ThemeExtension? other, double t) { - if (other is! CustomColors) { + ThemeExtension lerp( + ThemeExtension? other, double t) { + if (other is! AFThemeExtension) { return this; } - return CustomColors( + return AFThemeExtension( warning: Color.lerp(warning, other.warning, t), success: Color.lerp(success, other.success, t), greyHover: Color.lerp(greyHover, other.greyHover, t)!, greySelect: Color.lerp(greySelect, other.greySelect, t)!, lightGreyHover: Color.lerp(lightGreyHover, other.lightGreyHover, t)!, toggleOffFill: Color.lerp(toggleOffFill, other.toggleOffFill, t)!, + code: other.code, + callout: other.callout, + caption: other.caption, ); } } diff --git a/frontend/app_flowy/packages/flowy_infra/lib/size.dart b/frontend/app_flowy/packages/flowy_infra/lib/size.dart index 4e54b7dc1c..5d6a71d6b4 100644 --- a/frontend/app_flowy/packages/flowy_infra/lib/size.dart +++ b/frontend/app_flowy/packages/flowy_infra/lib/size.dart @@ -43,6 +43,14 @@ class FontSizes { static double get s16 => 16 * scale; static double get s18 => 18 * scale; + + static double get s20 => 20 * scale; + + static double get s24 => 24 * scale; + + static double get s32 => 32 * scale; + + static double get s44 => 44 * scale; } class Sizes { diff --git a/frontend/app_flowy/packages/flowy_infra/lib/text_style.dart b/frontend/app_flowy/packages/flowy_infra/lib/text_style.dart index aea4398f0b..9f477dcb0a 100644 --- a/frontend/app_flowy/packages/flowy_infra/lib/text_style.dart +++ b/frontend/app_flowy/packages/flowy_infra/lib/text_style.dart @@ -1,6 +1,7 @@ import 'package:flowy_infra/size.dart'; import 'package:flutter/material.dart'; +// preserved until deprecation class Fonts { static String general = "Poppins"; @@ -10,6 +11,7 @@ class Fonts { } class TextStyles { + // preserved until deprecation static TextStyle general({ double? fontSize, FontWeight fontWeight = FontWeight.w500, @@ -70,4 +72,64 @@ class TextStyles { fontSize: FontSizes.s11, fontWeight: FontWeight.w400, ); + + final String font; + final Color color; + + TextStyles({ + required this.font, + required this.color, + }); + + TextStyle getFontStyle({ + String? fontFamily, + double? fontSize, + FontWeight? fontWeight, + Color? fontColor, + double? letterSpacing, + double? lineHeight, + }) => + TextStyle( + fontFamily: fontFamily ?? font, + fontSize: fontSize ?? FontSizes.s12, + color: fontColor ?? color, + fontWeight: fontWeight ?? FontWeight.w500, + fontFamilyFallback: const ["Noto Color Emoji"], + letterSpacing: (fontSize ?? FontSizes.s12) * (letterSpacing ?? 0.005), + height: lineHeight, + ); + + TextTheme generateTextTheme() { + return TextTheme( + displayLarge: getFontStyle( + fontSize: FontSizes.s32, + fontWeight: FontWeight.w600, + lineHeight: 42.0, + ), // h2 + displayMedium: getFontStyle( + fontSize: FontSizes.s24, + fontWeight: FontWeight.w600, + lineHeight: 34.0, + ), // h3 + displaySmall: getFontStyle( + fontSize: FontSizes.s20, + fontWeight: FontWeight.w600, + lineHeight: 28.0, + ), // h4 + titleLarge: getFontStyle( + fontSize: FontSizes.s18, + fontWeight: FontWeight.w600, + ), // title + titleMedium: getFontStyle( + fontSize: FontSizes.s16, + fontWeight: FontWeight.w600, + ), // heading + titleSmall: getFontStyle( + fontSize: FontSizes.s14, + fontWeight: FontWeight.w600, + ), // subheading + bodyMedium: getFontStyle(), // body-regular + bodySmall: getFontStyle(fontWeight: FontWeight.w400), // body-thin + ); + } } diff --git a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart b/frontend/app_flowy/packages/flowy_infra/lib/theme.dart index 0bcb2ca401..8e845ea324 100644 --- a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart +++ b/frontend/app_flowy/packages/flowy_infra/lib/theme.dart @@ -1,3 +1,5 @@ +import 'package:flowy_infra/size.dart'; +import 'package:flowy_infra/text_style.dart'; import 'package:flutter/material.dart'; import 'color_extension.dart'; @@ -19,7 +21,7 @@ String themeTypeToString(Brightness brightness) { } } -// Color Pallettes +// Color Palettes const _black = Color(0xff000000); const _white = Color(0xFFFFFFFF); @@ -154,11 +156,10 @@ class AppTheme { } ThemeData get themeData { + final textTheme = TextStyles(font: font, color: shader1); return ThemeData( brightness: brightness, - textTheme: TextTheme( - bodyText2: TextStyle(color: shader1), - ), + textTheme: textTheme.generateTextTheme(), textSelectionTheme: TextSelectionThemeData( cursorColor: main2, selectionHandleColor: main2), primaryIconTheme: IconThemeData(color: hover), @@ -195,13 +196,23 @@ class AppTheme { shadow: shadow, ), extensions: [ - CustomColors( + AFThemeExtension( warning: yellow, success: green, greyHover: bg2, greySelect: bg3, lightGreyHover: shader6, toggleOffFill: shader5, + code: textTheme.getFontStyle(fontFamily: monospaceFont), + callout: textTheme.getFontStyle( + fontSize: FontSizes.s11, + fontColor: shader3, + ), + caption: textTheme.getFontStyle( + fontSize: FontSizes.s11, + fontWeight: FontWeight.w400, + fontColor: shader3, + ), ) ], ); diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart index c7cb47cd2b..91d1890314 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart @@ -138,13 +138,13 @@ class ScrollbarState extends State { // Handle color var handleColor = widget.handleColor ?? (Theme.of(context).brightness == Brightness.dark - ? CustomColors.of(context).greyHover.withOpacity(.2) - : CustomColors.of(context).greyHover); + ? AFThemeExtension.of(context).greyHover.withOpacity(.2) + : AFThemeExtension.of(context).greyHover); // Track color var trackColor = widget.trackColor ?? (Theme.of(context).brightness == Brightness.dark - ? CustomColors.of(context).greyHover.withOpacity(.1) - : CustomColors.of(context).greyHover.withOpacity(.3)); + ? AFThemeExtension.of(context).greyHover.withOpacity(.1) + : AFThemeExtension.of(context).greyHover.withOpacity(.3)); //Layout the stack, it just contains a child, and return Stack(children: [