[PR #7684] [MERGED] feat: implement new color tokens design #8042

New issue

Closed

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

mirror commented

2026-03-23 23:22:20 +00:00

Owner

📋 Pull Request Information

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

Base: main ← Head: theme

📝 Commits (2)

efed8af fix: missing AFThemeExtensionV2 on mobile
b364de6 feat: add appflowy_ui package

📊 Changes

91 files changed (+5852 additions, -23 deletions)

View changed files

📝 frontend/appflowy_flutter/analysis_options.yaml (+1 -0)
📝 frontend/appflowy_flutter/ios/Podfile.lock (+23 -23)
📝 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart (+7 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/.gitignore (+31 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/.metadata (+10 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/CHANGELOG.md (+3 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/LICENSE (+1 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/README.md (+39 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/analysis_options.yaml (+29 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/.gitignore (+45 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/.metadata (+30 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/README.md (+41 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/analysis_options.yaml (+28 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/lib/main.dart (+109 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/lib/src/buttons/buttons_page.dart (+287 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/lib/src/textfield/textfield_page.dart (+77 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/macos/.gitignore (+7 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/macos/Flutter/Flutter-Debug.xcconfig (+1 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/macos/Flutter/Flutter-Release.xcconfig (+1 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/macos/Runner.xcodeproj/project.pbxproj (+705 -0)

...and 71 more files

📄 Description

Feature Preview

Button

Textfield

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

Implement new color tokens design system for AppFlowy UI package, introducing a comprehensive theming and component library with support for buttons, text fields, and dynamic light/dark mode

New Features:

Introduce a new AppFlowy UI package with a design system
Create a comprehensive theming system with light and dark mode support
Implement reusable button components with multiple variants
Add a customizable text field component

Enhancements:

Develop a flexible color scheme with granular color tokens
Create base components with consistent styling and interaction states
Implement responsive and accessible UI components

_{🔄 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/7684 **Author:** [@LucasXu0](https://github.com/LucasXu0) **Created:** 4/4/2025 **Status:** ✅ Merged **Merged:** 4/4/2025 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `theme` --- ### 📝 Commits (2) - [`efed8af`](https://github.com/AppFlowy-IO/AppFlowy/commit/efed8af23512fa30d1948747de6efa74ccfcffe4) fix: missing AFThemeExtensionV2 on mobile - [`b364de6`](https://github.com/AppFlowy-IO/AppFlowy/commit/b364de6ea1361dfc7d5e8d1194a7cb44b748bc5f) feat: add appflowy_ui package ### 📊 Changes **91 files changed** (+5852 additions, -23 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/analysis_options.yaml` (+1 -0) 📝 `frontend/appflowy_flutter/ios/Podfile.lock` (+23 -23) 📝 `frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart` (+7 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/.gitignore` (+31 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/.metadata` (+10 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/CHANGELOG.md` (+3 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/LICENSE` (+1 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/README.md` (+39 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/analysis_options.yaml` (+29 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/.gitignore` (+45 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/.metadata` (+30 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/README.md` (+41 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/analysis_options.yaml` (+28 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/lib/main.dart` (+109 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/lib/src/buttons/buttons_page.dart` (+287 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/lib/src/textfield/textfield_page.dart` (+77 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/macos/.gitignore` (+7 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/macos/Flutter/Flutter-Debug.xcconfig` (+1 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/macos/Flutter/Flutter-Release.xcconfig` (+1 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/macos/Runner.xcodeproj/project.pbxproj` (+705 -0) _...and 71 more files_ </details> ### 📄 Description   ### Feature Preview #### Button <img width="1207" alt="Screenshot 2025-04-03 at 15 04 37" src="https://github.com/user-attachments/assets/56a5faa8-c32f-4533-8a43-acaad1d01993" /> #### Textfield <img width="1207" alt="Screenshot 2025-04-03 at 15 04 46" src="https://github.com/user-attachments/assets/ca9674fa-d94f-4698-b1fb-86af03bb3f96" />  ---  #### 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 Implement new color tokens design system for AppFlowy UI package, introducing a comprehensive theming and component library with support for buttons, text fields, and dynamic light/dark mode New Features: - Introduce a new AppFlowy UI package with a design system - Create a comprehensive theming system with light and dark mode support - Implement reusable button components with multiple variants - Add a customizable text field component Enhancements: - Develop a flexible color scheme with granular color tokens - Create base components with consistent styling and interaction states - Implement responsive and accessible UI components --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>