[PR #3090] [MERGED] feat: callout improvement #5558

New issue

Closed

opened 2026-03-23 22:19:16 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 22:19:16 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/3090
Author: @hyj1204
Created: 7/31/2023
Status: ✅ Merged
Merged: 8/10/2023
Merged by: @LucasXu0

Base: main ← Head: fix/improve_callout_in_dark_mode

📝 Commits (7)

7f7bb7c refactor: callout improvement
e0418d6 chore: update tints color in dark mode
61c1563 chore: adjust icon location
9937013 chore: add spacing in the end of callout
d7db88a chore: update tint colors in dark mode for dandelion and lavender theme
85e7b7b chore: upgrade editor version to 1.2.2
a5f064a Merge branch 'main' into fix/improve_callout_in_dark_mode

📊 Changes

8 files changed (+65 additions, -53 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart (+4 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action.dart (+7 -5)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart (+21 -21)
📝 frontend/appflowy_flutter/lib/workspace/application/appearance.dart (+1 -0)
📝 frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart (+9 -9)
📝 frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart (+9 -9)
📝 frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart (+9 -9)
📝 frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart (+5 -0)

📄 Description

This PR needs to be merged after #350 in editor package.

Feature Preview

To fix #3066
The background color of the callout cannot be null/transparent. Thus, we need to get a default callout background color from the current theme. I added a calloutBGColor in AFThemeExtension, so we can get it through BuildContext.
This calloutBGColor is used in calloutNode to create a new callout node(from the selection menu), and ColorOptionAction to reset the callout color to default.
Update the tint color in dark mode and adjust icon location to fit the texts better.
Fix #2845 #3029
Relate to #2366
All the combination pass WCAG 2.0 level AA which requires a contrast ratio of at least 4.5:1 for normal text.

PR Checklist

My code adheres to the AppFlowy Style Guide
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/3090 **Author:** [@hyj1204](https://github.com/hyj1204) **Created:** 7/31/2023 **Status:** ✅ Merged **Merged:** 8/10/2023 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `fix/improve_callout_in_dark_mode` --- ### 📝 Commits (7) - [`7f7bb7c`](https://github.com/AppFlowy-IO/AppFlowy/commit/7f7bb7c152609af32293f86cccb4ef8d6d59affb) refactor: callout improvement - [`e0418d6`](https://github.com/AppFlowy-IO/AppFlowy/commit/e0418d6a27a0c7bacaad9323bee72050765ab2d5) chore: update tints color in dark mode - [`61c1563`](https://github.com/AppFlowy-IO/AppFlowy/commit/61c15631e4f6a2b06afeecb7f166a538fbcc5c76) chore: adjust icon location - [`9937013`](https://github.com/AppFlowy-IO/AppFlowy/commit/9937013013f54d2d722a75a93e3f4f2474acb99c) chore: add spacing in the end of callout - [`d7db88a`](https://github.com/AppFlowy-IO/AppFlowy/commit/d7db88a3ecb657bae11b36ef2e15fc77bccbdbad) chore: update tint colors in dark mode for dandelion and lavender theme - [`85e7b7b`](https://github.com/AppFlowy-IO/AppFlowy/commit/85e7b7bdfb7d014baaaed48b01f45324568f824f) chore: upgrade editor version to 1.2.2 - [`a5f064a`](https://github.com/AppFlowy-IO/AppFlowy/commit/a5f064a80d0755478dd53de44ce1a280305368d1) Merge branch 'main' into fix/improve_callout_in_dark_mode ### 📊 Changes **8 files changed** (+65 additions, -53 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart` (+4 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action.dart` (+7 -5) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart` (+21 -21) 📝 `frontend/appflowy_flutter/lib/workspace/application/appearance.dart` (+1 -0) 📝 `frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart` (+9 -9) 📝 `frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart` (+9 -9) 📝 `frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart` (+9 -9) 📝 `frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart` (+5 -0) </details> ### 📄 Description   This PR needs to be merged after [#350](https://github.com/AppFlowy-IO/appflowy-editor/pull/350) in editor package. ### Feature Preview 1. To fix #3066 The background color of the callout cannot be null/transparent. Thus, we need to get a default callout background color from the current theme. I added a `calloutBGColor` in `AFThemeExtension`, so we can get it through `BuildContext`. This `calloutBGColor` is used in `calloutNode` to create a new callout node(from the selection menu), and `ColorOptionAction` to reset the callout color to default. 2. Update the tint color in dark mode and adjust icon location to fit the texts better. Fix #2845 #3029 Relate to #2366 All the combination pass **WCAG 2.0 level AA** which requires a contrast ratio of at least 4.5:1 for normal text. <img width="436" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/6e7bae1f-5c3f-4422-8c22-70d482eb8d59">  ---  #### PR Checklist - [ ] My code adheres to the [AppFlowy Style Guide](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/style-guides) - [ ] I've listed at least one issue that this PR fixes in the description above. - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [ ] All existing tests are passing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>