feat: callout improvement (#3090)

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

@@ -5,6 +5,7 @@ import 'package:appflowy/workspace/application/settings/shortcuts/settings_short
 import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_page/inline_page_reference.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:collection/collection.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -185,6 +186,8 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
       // OptionAction.moveDown,
     ];
 
+    final calloutBGColor = AFThemeExtension.of(context).calloutBGColor;
+
     final configuration = BlockComponentConfiguration(
       padding: (_) => const EdgeInsets.symmetric(vertical: 5.0),
     );
@@ -250,6 +253,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
       ),
       CalloutBlockKeys.type: CalloutBlockComponentBuilder(
         configuration: configuration,
+        defaultColor: calloutBGColor,
       ),
       DividerBlockKeys.type: DividerBlockComponentBuilder(
         configuration: configuration,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action.dart

@@ -16,6 +16,8 @@ enum OptionAction {
   turnInto,
   moveUp,
   moveDown,
+
+  /// callout background color
   color,
   divider,
   align;
@@ -241,11 +243,12 @@ class ColorOptionAction extends PopoverActionCell {
         final bgColor =
             node.attributes[blockComponentBackgroundColor] as String?;
         final selectedColor = bgColor?.toColor();
-
+        // get default background color from themeExtension
+        final defaultColor = AFThemeExtension.of(context).calloutBGColor;
         final colors = [
-          // clear background color.
+          // reset to default background color
           FlowyColorOption(
-            color: Colors.transparent,
+            color: defaultColor,
             name: LocaleKeys.document_plugins_optionAction_defaultColor.tr(),
           ),
           ...FlowyTint.values.map(
@@ -265,8 +268,7 @@ class ColorOptionAction extends PopoverActionCell {
           ),
           onTap: (color, index) async {
             final transaction = editorState.transaction;
-            final backgroundColor =
-                color == Colors.transparent ? null : color.toHex();
+            final backgroundColor = color.toHex();
             transaction.updateNode(node, {
               blockComponentBackgroundColor: backgroundColor,
             });

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@@ -26,16 +27,16 @@ class CalloutBlockKeys {
   static const String icon = 'icon';
 }
 
-// creating a new callout node
+// The one is inserted through selection menu
 Node calloutNode({
   Delta? delta,
   String emoji = '📌',
-  String backgroundColor = '#F0F0F0',
+  Color? defaultColor,
 }) {
   final attributes = {
     CalloutBlockKeys.delta: (delta ?? Delta()).toJson(),
     CalloutBlockKeys.icon: emoji,
-    CalloutBlockKeys.backgroundColor: backgroundColor,
+    CalloutBlockKeys.backgroundColor: defaultColor?.toHex() ?? '#f2f2f2',
   };
   return Node(
     type: CalloutBlockKeys.type,
@@ -43,12 +44,13 @@ Node calloutNode({
   );
 }
 
-// defining the callout block menu item for selection
+// defining the callout block menu item in selection menu
 SelectionMenuItem calloutItem = SelectionMenuItem.node(
   name: 'Callout',
   iconData: Icons.note,
-  keywords: ['callout'],
-  nodeBuilder: (editorState, _) => calloutNode(),
+  keywords: [CalloutBlockKeys.type],
+  nodeBuilder: (editorState, context) =>
+      calloutNode(defaultColor: AFThemeExtension.of(context).calloutBGColor),
   replace: (_, node) => node.delta?.isEmpty ?? false,
   updateSelection: (_, path, __, ___) {
     return Selection.single(path: path, startOffset: 0);
@@ -59,17 +61,21 @@ SelectionMenuItem calloutItem = SelectionMenuItem.node(
 class CalloutBlockComponentBuilder extends BlockComponentBuilder {
   CalloutBlockComponentBuilder({
     this.configuration = const BlockComponentConfiguration(),
+    required this.defaultColor,
   });
 
   @override
   final BlockComponentConfiguration configuration;
 
+  final Color defaultColor;
+
   @override
   BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
     return CalloutBlockComponentWidget(
       key: node.key,
       node: node,
+      defaultColor: defaultColor,
       configuration: configuration,
       showActions: showActions(node),
       actionBuilder: (context, state) => actionBuilder(
@@ -96,8 +102,11 @@ class CalloutBlockComponentWidget extends BlockComponentStatefulWidget {
     super.showActions,
     super.actionBuilder,
     super.configuration = const BlockComponentConfiguration(),
+    required this.defaultColor,
   });
 
+  final Color defaultColor;
+
   @override
   State<CalloutBlockComponentWidget> createState() =>
       _CalloutBlockComponentWidgetState();
@@ -128,17 +137,8 @@ class _CalloutBlockComponentWidgetState
   // get the background color of the note block from the node's attributes
   Color get backgroundColor {
     final colorString =
-        node.attributes[CalloutBlockKeys.backgroundColor] as String?;
-    if (colorString == null) {
-      return Colors.transparent;
-    }
-
-    final brightness = Theme.of(context).brightness;
-    final bool isDarkMode = brightness == Brightness.dark;
-
-    final Color bgColor = colorString.toColor();
-
-    return isDarkMode ? bgColor.withOpacity(0.3) : bgColor;
+        node.attributes[CalloutBlockKeys.backgroundColor] as String;
+    return colorString.toColor();
   }
 
   // get the emoji of the note block from the node's attributes or default to '📌'
@@ -162,9 +162,9 @@ class _CalloutBlockComponentWidgetState
           // the emoji picker button for the note
           Padding(
             padding: const EdgeInsets.only(
-              top: 6.0,
-              left: 2.0,
-              right: 2.0,
+              top: 8.0,
+              left: 4.0,
+              right: 4.0,
             ),
             child: EmojiPickerButton(
               key: ValueKey(
@@ -183,7 +183,7 @@ class _CalloutBlockComponentWidgetState
               child: buildCalloutBlockComponent(context),
             ),
           ),
-          const VSpace(10),
+          const HSpace(8.0),
         ],
       ),
     );

frontend/appflowy_flutter/lib/workspace/application/appearance.dart

@@ -346,6 +346,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
             fontSize: FontSizes.s11,
             fontColor: theme.shader3,
           ),
+          calloutBGColor: theme.hoverBG3,
           caption: _getFontStyle(
             fontFamily: fontFamily,
             fontSize: FontSizes.s11,

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart

@@ -93,15 +93,15 @@ class DandelionColorScheme extends FlowyColorScheme {
           bg2: _black,
           bg3: const Color(0xff4f4f4f),
           bg4: const Color(0xff2c144b),
-          tint1: const Color(0xff8738F5),
-          tint2: const Color(0xffE6336E),
-          tint3: const Color(0xffFF2D9E),
-          tint4: const Color(0xffE9973E),
-          tint5: const Color(0xffFBF000),
-          tint6: const Color(0xffC0F000),
-          tint7: const Color(0xff15F74E),
-          tint8: const Color(0xff00F0E2),
-          tint9: const Color(0xff00BCF0),
+          tint1: const Color(0x4d9327FF),
+          tint2: const Color(0x66FC0088),
+          tint3: const Color(0x4dFC00E2),
+          tint4: const Color(0x80BE5B00),
+          tint5: const Color(0x33F8EE00),
+          tint6: const Color(0x4d6DC300),
+          tint7: const Color(0x5900BD2A),
+          tint8: const Color(0x80008890),
+          tint9: const Color(0x4d0029FF),
           main1: _darkMain1,
           main2: const Color(0xffe0196f),
           shadow: _black,

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart

@@ -91,15 +91,15 @@ class DefaultColorScheme extends FlowyColorScheme {
           bg2: const Color(0xffEDEEF2),
           bg3: _darkMain1,
           bg4: const Color(0xff2C144B),
-          tint1: const Color(0xff8738F5),
-          tint2: const Color(0xffE6336E),
-          tint3: const Color(0xffFF2D9E),
-          tint4: const Color(0xffE9973E),
-          tint5: const Color(0xffFBF000),
-          tint6: const Color(0xffC0F000),
-          tint7: const Color(0xff15F74E),
-          tint8: const Color(0xff00F0E2),
-          tint9: const Color(0xff00BCF0),
+          tint1: const Color(0x4d9327FF),
+          tint2: const Color(0x66FC0088),
+          tint3: const Color(0x4dFC00E2),
+          tint4: const Color(0x80BE5B00),
+          tint5: const Color(0x33F8EE00),
+          tint6: const Color(0x4d6DC300),
+          tint7: const Color(0x5900BD2A),
+          tint8: const Color(0x80008890),
+          tint9: const Color(0x4d0029FF),
           main1: _darkMain1,
           main2: const Color(0xff00B7EA),
           shadow: const Color(0xff0F131C),

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart

@@ -94,15 +94,15 @@ class LavenderColorScheme extends FlowyColorScheme {
           bg2: _black,
           bg3: _darkMain1,
           bg4: const Color(0xff2c144b),
-          tint1: const Color(0xff8738F5),
-          tint2: const Color(0xffE6336E),
-          tint3: const Color(0xffFF2D9E),
-          tint4: const Color(0xffE9973E),
-          tint5: const Color(0xffFBF000),
-          tint6: const Color(0xffC0F000),
-          tint7: const Color(0xff15F74E),
-          tint8: const Color(0xff00F0E2),
-          tint9: const Color(0xff00BCF0),
+          tint1: const Color(0x4d9327FF),
+          tint2: const Color(0x66FC0088),
+          tint3: const Color(0x4dFC00E2),
+          tint4: const Color(0x80BE5B00),
+          tint5: const Color(0x33F8EE00),
+          tint6: const Color(0x4d6DC300),
+          tint7: const Color(0x5900BD2A),
+          tint8: const Color(0x80008890),
+          tint9: const Color(0x4d0029FF),
           main1: _darkMain1,
           main2: _darkMain1,
           shadow: _black,

frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart

@@ -22,6 +22,7 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
   final Color toggleOffFill;
   final Color progressBarBGColor;
   final Color toggleButtonBGColor;
+  final Color calloutBGColor;
 
   final TextStyle code;
   final TextStyle callout;
@@ -44,6 +45,7 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     required this.lightGreyHover,
     required this.toggleOffFill,
     required this.textColor,
+    required this.calloutBGColor,
     required this.code,
     required this.callout,
     required this.caption,
@@ -69,6 +71,7 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     Color? tint8,
     Color? tint9,
     Color? textColor,
+    Color? calloutBGColor,
     Color? greyHover,
     Color? greySelect,
     Color? lightGreyHover,
@@ -92,6 +95,7 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
       tint8: tint8 ?? this.tint8,
       tint9: tint9 ?? this.tint9,
       textColor: textColor ?? this.textColor,
+      calloutBGColor: calloutBGColor ?? this.calloutBGColor,
       greyHover: greyHover ?? this.greyHover,
       greySelect: greySelect ?? this.greySelect,
       lightGreyHover: lightGreyHover ?? this.lightGreyHover,
@@ -123,6 +127,7 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
       tint8: Color.lerp(tint8, other.tint8, t)!,
       tint9: Color.lerp(tint9, other.tint9, t)!,
       textColor: Color.lerp(textColor, other.textColor, t)!,
+      calloutBGColor: Color.lerp(calloutBGColor, other.calloutBGColor, t)!,
       greyHover: Color.lerp(greyHover, other.greyHover, t)!,
       greySelect: Color.lerp(greySelect, other.greySelect, t)!,
       lightGreyHover: Color.lerp(lightGreyHover, other.lightGreyHover, t)!,