From 068f93c258eaad91d9a4025598d673fd1e1cacf5 Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Fri, 11 Apr 2025 11:14:28 +0800 Subject: [PATCH] feat: add shadow tokens (#7726) --- .../document/presentation/editor_page.dart | 2 +- .../link/link_create_menu.dart | 2 +- .../link_preview/paste_as/paste_as_menu.dart | 2 +- .../lib/src/theme/data/builder.dart | 68 +++++++++++-------- .../appflowy_ui/lib/src/theme/data/data.dart | 22 +++--- .../lib/src/theme/shadow/shadow.dart | 9 ++- 6 files changed, 60 insertions(+), 45 deletions(-) diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart index 0ffb7de73a..edb19232be 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart @@ -445,7 +445,7 @@ class _AppFlowyEditorPageState extends State decoration: BoxDecoration( borderRadius: BorderRadius.circular(appTheme.borderRadius.l), color: appTheme.surfaceColorScheme.primary, - boxShadow: [appTheme.shadow.small], + boxShadow: appTheme.shadow.small, ), toolbarBuilder: (_, child, onDismiss, isMetricsChanged) => BlocProvider.value( diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_create_menu.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_create_menu.dart index 6213896feb..002d569c7b 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_create_menu.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_create_menu.dart @@ -315,6 +315,6 @@ ShapeDecoration buildToolbarLinkDecoration( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(radius), ), - shadows: [theme.shadow.small], + shadows: theme.shadow.small, ); } diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_preview/paste_as/paste_as_menu.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_preview/paste_as/paste_as_menu.dart index d31b2f8fd9..fb51cdcf47 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_preview/paste_as/paste_as_menu.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_preview/paste_as/paste_as_menu.dart @@ -148,7 +148,7 @@ class _PasteAsMenuState extends State { decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), color: theme.surfaceColorScheme.primary, - boxShadow: [theme.shadow.medium], + boxShadow: theme.shadow.medium, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, diff --git a/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/builder.dart b/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/builder.dart index 8923f61e1f..06c6eb5d8e 100644 --- a/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/builder.dart +++ b/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/builder.dart @@ -93,35 +93,6 @@ class AppFlowyThemeBuilder { }; } - AppFlowyShadow buildShadow(Brightness brightness) { - return switch (brightness) { - Brightness.light => AppFlowyShadow( - small: const BoxShadow( - offset: Offset(0.0, 2.0), - blurRadius: 16.0, - color: Color(0x1F000000), - ), - medium: const BoxShadow( - offset: Offset(0.0, 4.0), - blurRadius: 32.0, - color: Color(0x1F000000), - ), - ), - Brightness.dark => AppFlowyShadow( - small: BoxShadow( - offset: Offset(0.0, 2.0), - blurRadius: 16.0, - color: Color(0x7A000000), - ), - medium: BoxShadow( - offset: Offset(0.0, 4.0), - blurRadius: 32.0, - color: Color(0x7A000000), - ), - ), - }; - } - AppFlowyBorderColorScheme buildBorderColorScheme( AppFlowyBaseColorScheme colorScheme, Brightness brightness, @@ -351,4 +322,43 @@ class AppFlowyThemeBuilder { xxl: AppFlowySpacingConstant.spacing600, ); } + + AppFlowyShadow buildShadow( + Brightness brightness, + ) { + return switch (brightness) { + Brightness.light => AppFlowyShadow( + small: [ + BoxShadow( + offset: Offset(0, 2), + blurRadius: 16, + color: Color(0x1F000000), + ), + ], + medium: [ + BoxShadow( + offset: Offset(0, 4), + blurRadius: 32, + color: Color(0x1F000000), + ), + ], + ), + Brightness.dark => AppFlowyShadow( + small: [ + BoxShadow( + offset: Offset(0, 2), + blurRadius: 16, + color: Color(0x7A000000), + ), + ], + medium: [ + BoxShadow( + offset: Offset(0, 4), + blurRadius: 32, + color: Color(0x7A000000), + ), + ], + ), + }; + } } diff --git a/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/data.dart b/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/data.dart index 9494bdf0e2..60f7d1f1a4 100644 --- a/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/data.dart +++ b/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/data.dart @@ -36,9 +36,9 @@ abstract class AppFlowyBaseTheme { AppFlowySpacing get spacing; - AppFlowyBrandColorScheme get brandColorScheme; - AppFlowyShadow get shadow; + + AppFlowyBrandColorScheme get brandColorScheme; } class AppFlowyThemeData extends AppFlowyBaseTheme { @@ -70,10 +70,11 @@ class AppFlowyThemeData extends AppFlowyBaseTheme { colorScheme, Brightness.light, ); - final shadow = themeBuilder.buildShadow(Brightness.light); final brandColorScheme = themeBuilder.buildBrandColorScheme(colorScheme); final borderRadius = themeBuilder.buildBorderRadius(colorScheme); final spacing = themeBuilder.buildSpacing(colorScheme); + final shadow = themeBuilder.buildShadow(Brightness.light); + return AppFlowyThemeData( colorScheme: colorScheme, textColorScheme: textColorScheme, @@ -85,8 +86,8 @@ class AppFlowyThemeData extends AppFlowyBaseTheme { surfaceColorScheme: surfaceColorScheme, borderRadius: borderRadius, spacing: spacing, - brandColorScheme: brandColorScheme, shadow: shadow, + brandColorScheme: brandColorScheme, ); } @@ -117,10 +118,11 @@ class AppFlowyThemeData extends AppFlowyBaseTheme { colorScheme, Brightness.dark, ); - final shadow = themeBuilder.buildShadow(Brightness.dark); final brandColorScheme = themeBuilder.buildBrandColorScheme(colorScheme); final borderRadius = themeBuilder.buildBorderRadius(colorScheme); final spacing = themeBuilder.buildSpacing(colorScheme); + final shadow = themeBuilder.buildShadow(Brightness.dark); + return AppFlowyThemeData( colorScheme: colorScheme, textColorScheme: textColorScheme, @@ -132,8 +134,8 @@ class AppFlowyThemeData extends AppFlowyBaseTheme { surfaceColorScheme: surfaceColorScheme, borderRadius: borderRadius, spacing: spacing, - brandColorScheme: brandColorScheme, shadow: shadow, + brandColorScheme: brandColorScheme, ); } @@ -146,10 +148,10 @@ class AppFlowyThemeData extends AppFlowyBaseTheme { required this.surfaceColorScheme, required this.borderRadius, required this.spacing, + required this.shadow, required this.brandColorScheme, required this.iconColorTheme, required this.backgroundColorScheme, - required this.shadow, this.brightness = Brightness.light, }); @@ -181,6 +183,9 @@ class AppFlowyThemeData extends AppFlowyBaseTheme { @override final AppFlowySpacing spacing; + @override + final AppFlowyShadow shadow; + @override final AppFlowyBrandColorScheme brandColorScheme; @@ -190,9 +195,6 @@ class AppFlowyThemeData extends AppFlowyBaseTheme { @override final AppFlowyBackgroundColorScheme backgroundColorScheme; - @override - final AppFlowyShadow shadow; - static AppFlowyTextColorScheme buildTextColorScheme( AppFlowyBaseColorScheme colorScheme, Brightness brightness, diff --git a/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/shadow/shadow.dart b/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/shadow/shadow.dart index 9bb2ac1116..457b86265e 100644 --- a/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/shadow/shadow.dart +++ b/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/shadow/shadow.dart @@ -1,8 +1,11 @@ import 'package:flutter/widgets.dart'; class AppFlowyShadow { - AppFlowyShadow({required this.small, required this.medium}); + AppFlowyShadow({ + required this.small, + required this.medium, + }); - final BoxShadow small; - final BoxShadow medium; + final List small; + final List medium; }