[PR #7936] [MERGED] feat: integrate color token v3 #8224

New issue

Closed

opened 2026-03-23 23:23:11 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:23:11 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/7936
Author: @LucasXu0
Created: 5/15/2025
Status: ✅ Merged
Merged: 5/15/2025
Merged by: @LucasXu0

Base: main ← Head: color_token_v3

📝 Commits (2)

3afe098 feat: integrate color token v3
34ce0f5 chore: update existing color tokens

📊 Changes

45 files changed (+2778 additions, -1176 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/ai/widgets/ai_prompt_modal/ai_prompt_category_list.dart (+3 -3)
📝 frontend/appflowy_flutter/lib/ai/widgets/ai_prompt_modal/ai_prompt_preview.dart (+3 -3)
📝 frontend/appflowy_flutter/lib/ai/widgets/ai_prompt_modal/ai_prompt_visible_list.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/ai/widgets/prompt_input/prompt_input_text_controller.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_edit_link_widget.dart (+3 -3)
📝 frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_textfield.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_embed/link_embed_block_component.dart (+6 -6)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_embed/link_embed_menu.dart (+16 -16)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_preview/custom_link_preview.dart (+3 -3)
📝 frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/desktop_sign_in_screen.dart (+2 -8)
📝 frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/continue_with/back_to_login_in_button.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/continue_with/continue_with_password_page.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_button/third_party_sign_in_buttons.dart (+4 -4)
📝 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_ask_ai_entrance.dart (+7 -7)
📝 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_summary_cell.dart (+8 -9)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu_element.dart (+3 -3)
📝 frontend/appflowy_flutter/packages/appflowy_ui/example/lib/src/modal/modal_page.dart (+3 -3)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/base_button/base_button.dart (+3 -3)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/filled_button/filled_button.dart (+3 -3)

...and 25 more files

📄 Description

Feature Preview

use latest color tokens v3.
adjust the existing color tokens.

PR Checklist

My code adheres to AppFlowy's Conventions
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.

Summary by Sourcery

Integrate the v3 color token system throughout the UI library by regenerating semantic and primitive token definitions, extending theme data with new schemes, and updating all affected components to use the new color API.

New Features:

Add AppFlowySurfaceContainerColorScheme and AppFlowyBadgeColorScheme to extend theme data with layered surface containers and badge palettes
Add fontFamily parameter to light and dark theme builders for custom typography

Enhancements:

Regenerate semantic tokens to rename “purple”→“featured”, remove deprecated fields, and update primary/hover values
Regenerate primitive tokens to introduce new neutral shades and alpha variants
Extend AppFlowyThemeData and color scheme definitions to include new properties and simplify background scheme
Update generate_theme.dart to support custom font families and incorporate the new color schemes
Migrate all button, ghost, filled, textfield, and menu components to use fillColorScheme.content/contentHover and borderColorScheme.primary/primaryHover

Build:

Update theme generation script to output V3 tokens and updated color scheme constructors

_{🔄 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/7936 **Author:** [@LucasXu0](https://github.com/LucasXu0) **Created:** 5/15/2025 **Status:** ✅ Merged **Merged:** 5/15/2025 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `color_token_v3` --- ### 📝 Commits (2) - [`3afe098`](https://github.com/AppFlowy-IO/AppFlowy/commit/3afe098670aa1940fcd3d3a490682208ec978d1b) feat: integrate color token v3 - [`34ce0f5`](https://github.com/AppFlowy-IO/AppFlowy/commit/34ce0f5a3c9446e7c8756274d172f75d04d4b8c0) chore: update existing color tokens ### 📊 Changes **45 files changed** (+2778 additions, -1176 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/ai/widgets/ai_prompt_modal/ai_prompt_category_list.dart` (+3 -3) 📝 `frontend/appflowy_flutter/lib/ai/widgets/ai_prompt_modal/ai_prompt_preview.dart` (+3 -3) 📝 `frontend/appflowy_flutter/lib/ai/widgets/ai_prompt_modal/ai_prompt_visible_list.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/ai/widgets/prompt_input/prompt_input_text_controller.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_edit_link_widget.dart` (+3 -3) 📝 `frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_textfield.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_embed/link_embed_block_component.dart` (+6 -6) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_embed/link_embed_menu.dart` (+16 -16) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_preview/custom_link_preview.dart` (+3 -3) 📝 `frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/desktop_sign_in_screen.dart` (+2 -8) 📝 `frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/continue_with/back_to_login_in_button.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/continue_with/continue_with_password_page.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/third_party_sign_in_button/third_party_sign_in_buttons.dart` (+4 -4) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_ask_ai_entrance.dart` (+7 -7) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_summary_cell.dart` (+8 -9) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu_element.dart` (+3 -3) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/example/lib/src/modal/modal_page.dart` (+3 -3) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/base_button/base_button.dart` (+3 -3) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/filled_button/filled_button.dart` (+3 -3) _...and 25 more files_ </details> ### 📄 Description   ### Feature Preview - use latest color tokens v3. - adjust the existing color tokens.  ---  #### PR Checklist - [x] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [x] I've listed at least one issue that this PR fixes in the description above. - [x] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [x] All existing tests are passing. ## Summary by Sourcery Integrate the v3 color token system throughout the UI library by regenerating semantic and primitive token definitions, extending theme data with new schemes, and updating all affected components to use the new color API. New Features: - Add `AppFlowySurfaceContainerColorScheme` and `AppFlowyBadgeColorScheme` to extend theme data with layered surface containers and badge palettes - Add `fontFamily` parameter to `light` and `dark` theme builders for custom typography Enhancements: - Regenerate semantic tokens to rename “purple”→“featured”, remove deprecated fields, and update primary/hover values - Regenerate primitive tokens to introduce new neutral shades and alpha variants - Extend `AppFlowyThemeData` and color scheme definitions to include new properties and simplify background scheme - Update `generate_theme.dart` to support custom font families and incorporate the new color schemes - Migrate all button, ghost, filled, textfield, and menu components to use `fillColorScheme.content`/`contentHover` and `borderColorScheme.primary`/`primaryHover` Build: - Update theme generation script to output V3 tokens and updated color scheme constructors --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>