feat: add shadow tokens (#7726)

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart

@@ -445,7 +445,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage>
           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(

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

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<PasteAsMenu> {
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(8),
           color: theme.surfaceColorScheme.primary,
-          boxShadow: [theme.shadow.medium],
+          boxShadow: theme.shadow.medium,
         ),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,

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),
+            ),
+          ],
+        ),
+    };
+  }
 }

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,

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 List<BoxShadow> small;
-  final BoxShadow medium;
+  final List<BoxShadow> medium;
 }