[PR #7751] [MERGED] refactor: use script to generate design tokens #8088

New issue

Closed

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

mirror commented

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

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/7751
Author: @richardshiue
Created: 4/15/2025
Status: ✅ Merged
Merged: 4/17/2025
Merged by: @richardshiue

Base: feat/custom-prompt ← Head: refactor/generate-tokens

📝 Commits (4)

a87c28c refactor: use script to generate design tokens
4925586 chore: improve code readaility
03ad031 refactor: make builder reusable to built in themes
5e41489 chore: improve code readability

📊 Changes

51 files changed (+4116 additions, -1183 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/ai/ai_writer_toolbar_item.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_embed/link_embed_menu.dart (+3 -3)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_preview/custom_link_preview.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_format_toolbar_items.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_hightlight_color_toolbar_item.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_link_toolbar_item.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_text_align_toolbar_item.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_text_color_toolbar_item.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/text_heading_toolbar_item.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/text_suggestions_toolbar_item.dart (+1 -1)
📝 frontend/appflowy_flutter/packages/appflowy_ui/example/lib/main.dart (+1 -1)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/textfield/textfield.dart (+2 -2)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/appflowy_theme.dart (+10 -11)
➖ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/base_scheme.dart (+0 -33)
➖ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/blue.dart (+0 -27)
➖ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/green.dart (+0 -24)
➖ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/magenta.dart (+0 -25)
➖ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/neutral.dart (+0 -49)
➖ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/orange.dart (+0 -25)
➖ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/purple.dart (+0 -25)

...and 31 more files

📄 Description

This PR transitions from entering values in the dart source code to generating them using a script.

In the appflowy_ui package, run dart run script/generate_theme.dart to generate the default theme tokens.

The folder structure is slightly different now:

lib/src/theme/
├── appflowy_theme.dart
├── data                                   <- BUILT-IN THEMES
│   ├── appflowy_default                   <- DEFAULT THEME
│   │   ├── primitive.dart
│   │   └── semantic.dart
│   ├── builder.dart                       <- SHARED TOKENS
│   └── built_in_themes.dart
├── definition                             <- THEME STRUCTURE DEFINITION
│   ├── base_theme.dart
│   ├── border_radius
│   │   └── border_radius.dart
│   ├── color_scheme
│   │   ├── background_color_scheme.dart
│   │   ├── border_color_scheme.dart
│   │   ├── brand_color_scheme.dart
│   │   ├── color_scheme.dart
│   │   ├── fill_color_scheme.dart
│   │   ├── icon_color_scheme.dart
│   │   ├── other_color_scheme.dart
│   │   ├── surface_color_scheme.dart
│   │   └── text_color_scheme.dart
│   ├── shadow
│   │   └── shadow.dart
│   ├── spacing
│   │   └── spacing.dart
│   └── text_style
│       ├── base
│       │   └── default_text_style.dart
│       └── text_style.dart
└── theme.dart

The API for developing the UI remains the same. Call AppFlowyTheme.of(context) and then get the color, text style, border, what have you.
The iconColorTheme has been renamed to iconColorScheme.

Feature Preview

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

Refactor the theme system to use a script-generated design token approach, improving theme management and consistency

New Features:

Implement an automated script to generate theme tokens for light and dark modes
Create a more flexible theme generation process using JSON token files

Enhancements:

Restructure theme files to separate primitive and semantic tokens
Improve theme definition with a more modular and maintainable approach
Rename and consolidate theme-related classes for better clarity

Build:

Add a Dart script to generate theme tokens automatically

Chores:

Remove legacy color scheme and theme files
Reorganize theme-related file structure
Update import paths across the project

Summary by Sourcery

Refactor the theme system to use a script-generated design token approach, improving theme management and consistency

New Features:

Implement an automated script to generate theme tokens for light and dark modes
Create a more flexible theme generation process using JSON token files

Enhancements:

Restructure theme files to separate primitive and semantic tokens
Improve theme definition with a more modular and maintainable approach
Rename and consolidate theme-related classes for better clarity

Build:

Add a Dart script to generate theme tokens automatically

Chores:

Remove legacy color scheme and theme files
Reorganize theme-related file structure
Update import paths across the project

_{🔄 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/7751 **Author:** [@richardshiue](https://github.com/richardshiue) **Created:** 4/15/2025 **Status:** ✅ Merged **Merged:** 4/17/2025 **Merged by:** [@richardshiue](https://github.com/richardshiue) **Base:** `feat/custom-prompt` ← **Head:** `refactor/generate-tokens` --- ### 📝 Commits (4) - [`a87c28c`](https://github.com/AppFlowy-IO/AppFlowy/commit/a87c28c4ca20dae670b4a5c8c9642d072e9a0437) refactor: use script to generate design tokens - [`4925586`](https://github.com/AppFlowy-IO/AppFlowy/commit/49255862b2843d55387e4426577a0a0c1ae8746b) chore: improve code readaility - [`03ad031`](https://github.com/AppFlowy-IO/AppFlowy/commit/03ad03159456a84c60a0c1eb674494ad3ae375d2) refactor: make builder reusable to built in themes - [`5e41489`](https://github.com/AppFlowy-IO/AppFlowy/commit/5e414893cb2fe945a661986f2c15b04373326037) chore: improve code readability ### 📊 Changes **51 files changed** (+4116 additions, -1183 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/ai/ai_writer_toolbar_item.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_embed/link_embed_menu.dart` (+3 -3) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_preview/custom_link_preview.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_format_toolbar_items.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_hightlight_color_toolbar_item.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_link_toolbar_item.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_text_align_toolbar_item.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_text_color_toolbar_item.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/text_heading_toolbar_item.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/text_suggestions_toolbar_item.dart` (+1 -1) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/example/lib/main.dart` (+1 -1) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/textfield/textfield.dart` (+2 -2) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/appflowy_theme.dart` (+10 -11) ➖ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/base_scheme.dart` (+0 -33) ➖ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/blue.dart` (+0 -27) ➖ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/green.dart` (+0 -24) ➖ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/magenta.dart` (+0 -25) ➖ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/neutral.dart` (+0 -49) ➖ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/orange.dart` (+0 -25) ➖ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/color_scheme/base/purple.dart` (+0 -25) _...and 31 more files_ </details> ### 📄 Description This PR transitions from entering values in the dart source code to generating them using a script. 1. In the `appflowy_ui` package, run `dart run script/generate_theme.dart` to generate the default theme tokens. 2. The folder structure is slightly different now: ``` lib/src/theme/ ├── appflowy_theme.dart ├── data <- BUILT-IN THEMES │ ├── appflowy_default <- DEFAULT THEME │ │ ├── primitive.dart │ │ └── semantic.dart │ ├── builder.dart <- SHARED TOKENS │ └── built_in_themes.dart ├── definition <- THEME STRUCTURE DEFINITION │ ├── base_theme.dart │ ├── border_radius │ │ └── border_radius.dart │ ├── color_scheme │ │ ├── background_color_scheme.dart │ │ ├── border_color_scheme.dart │ │ ├── brand_color_scheme.dart │ │ ├── color_scheme.dart │ │ ├── fill_color_scheme.dart │ │ ├── icon_color_scheme.dart │ │ ├── other_color_scheme.dart │ │ ├── surface_color_scheme.dart │ │ └── text_color_scheme.dart │ ├── shadow │ │ └── shadow.dart │ ├── spacing │ │ └── spacing.dart │ └── text_style │ ├── base │ │ └── default_text_style.dart │ └── text_style.dart └── theme.dart ``` 3. The API for developing the UI remains the same. Call `AppFlowyTheme.of(context)` and then get the color, text style, border, what have you. 4. The `iconColorTheme` has been renamed to `iconColorScheme`. ### Feature Preview  ---  #### 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 Refactor the theme system to use a script-generated design token approach, improving theme management and consistency New Features: - Implement an automated script to generate theme tokens for light and dark modes - Create a more flexible theme generation process using JSON token files Enhancements: - Restructure theme files to separate primitive and semantic tokens - Improve theme definition with a more modular and maintainable approach - Rename and consolidate theme-related classes for better clarity Build: - Add a Dart script to generate theme tokens automatically Chores: - Remove legacy color scheme and theme files - Reorganize theme-related file structure - Update import paths across the project ## Summary by Sourcery Refactor the theme system to use a script-generated design token approach, improving theme management and consistency New Features: - Implement an automated script to generate theme tokens for light and dark modes - Create a more flexible theme generation process using JSON token files Enhancements: - Restructure theme files to separate primitive and semantic tokens - Improve theme definition with a more modular and maintainable approach - Rename and consolidate theme-related classes for better clarity Build: - Add a Dart script to generate theme tokens automatically Chores: - Remove legacy color scheme and theme files - Reorganize theme-related file structure - Update import paths across the project --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>