diff --git a/frontend/appflowy_flutter/assets/images/home/new_app_dark.svg b/frontend/appflowy_flutter/assets/images/home/new_app_dark.svg
new file mode 100644
index 0000000000..f1ab9c8cd3
--- /dev/null
+++ b/frontend/appflowy_flutter/assets/images/home/new_app_dark.svg
@@ -0,0 +1,5 @@
+
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/board_page.dart b/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/board_page.dart
index cbd85594a0..24c30a0cd3 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/board_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/board_page.dart
@@ -184,7 +184,7 @@ class _BoardContentState extends State {
width: 20,
child: svgWidget(
"home/add",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
onAddButtonClick: () {
@@ -207,7 +207,7 @@ class _BoardContentState extends State {
width: 20,
child: svgWidget(
"home/add",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
title: FlowyText.medium(
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_setting.dart b/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_setting.dart
index 5e97c9875f..97118c8e32 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_setting.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_setting.dart
@@ -113,7 +113,7 @@ class _SettingItem extends StatelessWidget {
},
leftIcon: svgWidget(
action.iconName(),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
);
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart b/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart
index 3a71c2c4ff..0b835f8a39 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart
@@ -203,7 +203,7 @@ class _NewEventButton extends StatelessWidget {
iconPadding: EdgeInsets.zero,
icon: svgWidget(
"home/add",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
width: 22,
);
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/choicechip/choicechip.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/choicechip/choicechip.dart
index 8aa9892d41..6900f472e0 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/choicechip/choicechip.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/choicechip/choicechip.dart
@@ -43,7 +43,7 @@ class ChoiceChipButton extends StatelessWidget {
radius: const BorderRadius.all(Radius.circular(14)),
leftIcon: svgWidget(
filterInfo.fieldInfo.fieldType.iconName(),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
rightIcon: _ChoicechipFilterDesc(filterDesc: filterDesc),
hoverColor: AFThemeExtension.of(context).lightGreyHover,
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/create_filter_list.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/create_filter_list.dart
index e473034fb3..3c8c6b4ba9 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/create_filter_list.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/create_filter_list.dart
@@ -162,7 +162,7 @@ class _FilterPropertyCell extends StatelessWidget {
onTap: () => onTap(fieldInfo),
leftIcon: svgWidget(
fieldInfo.fieldType.iconName(),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
);
}
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/disclosure_button.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/disclosure_button.dart
index 7bab27b745..0f70d7be9d 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/disclosure_button.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/disclosure_button.dart
@@ -34,7 +34,7 @@ class _DisclosureButtonState extends State {
width: 20,
icon: svgWidget(
"editor/details",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
onPressed: () => controller.show(),
);
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/filter_menu.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/filter_menu.dart
index a7f17b1e8a..ec8c47dc6f 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/filter_menu.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/filter_menu.dart
@@ -76,7 +76,7 @@ class _AddFilterButtonState extends State {
hoverColor: AFThemeExtension.of(context).lightGreyHover,
leftIcon: svgWidget(
"home/add",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
onTap: () => popoverController.show(),
),
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart
index 9e4eeb1a4a..44f1d3fb7d 100755
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart
@@ -19,7 +19,7 @@ class GridAddRowButton extends StatelessWidget {
onTap: () => context.read().add(const GridEvent.createRow()),
leftIcon: svgWidget(
"home/add",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
);
}
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart
index 91d5368286..3af13c93a2 100755
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart
@@ -168,7 +168,7 @@ class FieldCellButton extends StatelessWidget {
onTap: onTap,
leftIcon: svgWidget(
field.fieldType.iconName(),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
radius: BorderRadius.zero,
text: FlowyText.medium(
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_list.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_list.dart
index da6c28d606..f94b46cbee 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_list.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_list.dart
@@ -61,7 +61,7 @@ class FieldTypeCell extends StatelessWidget {
onTap: () => onSelectField(fieldType),
leftIcon: svgWidget(
fieldType.iconName(),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
);
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart
index 4974490642..5f2364571c 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart
@@ -116,11 +116,11 @@ class _SwitchFieldButton extends StatelessWidget {
margin: GridSize.typeOptionContentInsets,
leftIcon: svgWidget(
bloc.state.field.fieldType.iconName(),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
rightIcon: svgWidget(
"grid/more",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
);
}
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart
index 0e4c6e28f5..986a91daa2 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart
@@ -182,7 +182,7 @@ class CreateFieldButton extends StatelessWidget {
onTap: () {},
leftIcon: svgWidget(
"home/add",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
popupBuilder: (BuildContext popover) {
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart
index a92ba48fd8..3da0aadd93 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart
@@ -153,7 +153,7 @@ class DateFormatButton extends StatelessWidget {
onHover: onHover,
rightIcon: svgWidget(
"grid/more",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
);
@@ -184,7 +184,7 @@ class TimeFormatButton extends StatelessWidget {
onHover: onHover,
rightIcon: svgWidget(
"grid/more",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
);
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart
index fd5824a0d1..45479046c5 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart
@@ -61,7 +61,7 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
margin: GridSize.typeOptionContentInsets,
rightIcon: svgWidget(
"grid/more",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
text: Row(
children: [
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart
index e30f460c16..cac4f1f0f0 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart
@@ -194,7 +194,7 @@ class _OptionCellState extends State<_OptionCell> {
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: svgWidget(
"grid/details",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
],
@@ -251,7 +251,7 @@ class _AddOptionButton extends StatelessWidget {
},
leftIcon: svgWidget(
"home/add",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
),
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option_editor.dart
index c248ec01df..b0d6338ae3 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option_editor.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option_editor.dart
@@ -106,7 +106,7 @@ class _DeleteTag extends StatelessWidget {
text: FlowyText.medium(LocaleKeys.grid_selectOption_deleteTag.tr()),
leftIcon: svgWidget(
"grid/delete",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
onTap: () {
context
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/action.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/action.dart
index 2aecd5f868..9ecaaf055b 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/action.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/action.dart
@@ -67,7 +67,7 @@ class _ActionCell extends StatelessWidget {
},
leftIcon: svgWidget(
action.iconName(),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
);
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/create_sort_list.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/create_sort_list.dart
index 22f3403a4d..531d781aee 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/create_sort_list.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/create_sort_list.dart
@@ -161,7 +161,7 @@ class _SortPropertyCell extends StatelessWidget {
onTap: () => onTap(fieldInfo),
leftIcon: svgWidget(
fieldInfo.fieldType.iconName(),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
);
}
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart
index 4bd72caa07..8789a6829a 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart
@@ -125,7 +125,7 @@ class _SortItem extends StatelessWidget {
hoverColor: AFThemeExtension.of(context).lightGreyHover,
icon: svgWidget(
"home/close",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
);
@@ -187,7 +187,7 @@ class _AddSortButtonState extends State<_AddSortButton> {
onTap: () => _popoverController.show(),
leftIcon: svgWidget(
"home/add",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
),
@@ -222,7 +222,7 @@ class _DeleteSortButton extends StatelessWidget {
},
leftIcon: svgWidget(
"editor/delete",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
);
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_menu.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_menu.dart
index 19b9b1a569..81a07844cf 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_menu.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_menu.dart
@@ -61,7 +61,7 @@ class SortChoiceChip extends StatelessWidget {
final text = LocaleKeys.grid_settings_sort.tr();
final leftIcon = svgWidget(
"grid/setting/sort",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
);
return SizedBox(
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_group.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_group.dart
index 127cb63247..c12ac5613a 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_group.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_group.dart
@@ -82,7 +82,7 @@ class _GridGroupCell extends StatelessWidget {
text: FlowyText.medium(fieldInfo.name),
leftIcon: svgWidget(
fieldInfo.fieldType.iconName(),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
rightIcon: rightIcon,
onTap: () {
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_property.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_property.dart
index 9b65628f4f..0b6f67a6f3 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_property.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_property.dart
@@ -96,7 +96,7 @@ class _GridPropertyCellState extends State<_GridPropertyCell> {
Widget build(BuildContext context) {
final checkmark = svgWidget(
widget.fieldInfo.visibility ? 'home/show' : 'home/hide',
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
);
return SizedBox(
@@ -118,7 +118,7 @@ class _GridPropertyCellState extends State<_GridPropertyCell> {
text: FlowyText.medium(widget.fieldInfo.name),
leftIcon: svgWidget(
widget.fieldInfo.fieldType.iconName(),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
rightIcon: FlowyIconButton(
hoverColor: Colors.transparent,
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_setting.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_setting.dart
index 25b742b6fc..e41d75ce69 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_setting.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_setting.dart
@@ -78,7 +78,7 @@ class _SettingItem extends StatelessWidget {
onTap: () => onAction(action),
leftIcon: svgWidget(
action.iconName(),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
);
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/card.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/card.dart
index 196b4b40ec..1227ef8e3c 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/card.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/card.dart
@@ -232,7 +232,7 @@ class _CardMoreOption extends StatelessWidget with CardAccessory {
padding: const EdgeInsets.all(3.0),
child: svgWidget(
'grid/details',
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
);
}
@@ -254,7 +254,7 @@ class _CardEditOption extends StatelessWidget with CardAccessory {
padding: const EdgeInsets.all(3.0),
child: svgWidget(
'editor/edit',
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
);
}
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/accessory/cell_accessory.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/accessory/cell_accessory.dart
index 39a8bd41f6..031f957ef3 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/accessory/cell_accessory.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/accessory/cell_accessory.dart
@@ -7,7 +7,6 @@ import 'package:flowy_infra/size.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:easy_localization/easy_localization.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
import '../cell_builder.dart';
@@ -69,7 +68,6 @@ class _PrimaryCellAccessoryState extends State
Widget build(BuildContext context) {
return Tooltip(
message: LocaleKeys.tooltip_openAsPage.tr(),
- textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
child: svgWidget(
"grid/expander",
color: Theme.of(context).colorScheme.primary,
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart
index 3e5d744e1e..891e3e7c05 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart
@@ -137,7 +137,7 @@ class _ChecklistOptionCellState extends State<_ChecklistOptionCell> {
iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
icon: svgWidget(
"editor/details",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
);
}
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart
index be6674b5bc..3b338d5355 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart
@@ -173,13 +173,13 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
leftChevronPadding: EdgeInsets.zero,
leftChevronIcon: svgWidget(
"home/arrow_left",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
rightChevronPadding: EdgeInsets.zero,
rightChevronMargin: EdgeInsets.zero,
rightChevronIcon: svgWidget(
"home/arrow_right",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
headerMargin: const EdgeInsets.only(bottom: 8.0),
),
@@ -254,7 +254,7 @@ class _IncludeTimeButton extends StatelessWidget {
children: [
svgWidget(
"grid/clock",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
const HSpace(4),
FlowyText.medium(LocaleKeys.grid_field_includeTime.tr()),
@@ -387,7 +387,7 @@ class _DateTypeOptionButton extends StatelessWidget {
margin: GridSize.typeOptionContentInsets,
rightIcon: svgWidget(
"grid/more",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
),
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart
index c83b8ade30..29b0d9b96e 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart
@@ -116,7 +116,7 @@ class SelectOptionTag extends StatelessWidget {
hoverColor: Colors.transparent,
icon: svgWidget(
'home/close',
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
],
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart
index 024e88405c..e3ba894373 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart
@@ -277,7 +277,7 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
iconPadding: const EdgeInsets.symmetric(horizontal: 6.0),
icon: svgWidget(
"editor/details",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
],
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart
index 9ab086e356..30cd9ae807 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart
@@ -213,7 +213,7 @@ class _EditURLAccessoryState extends State<_EditURLAccessory>
offset: const Offset(0, 8),
child: svgWidget(
"editor/edit",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
popupBuilder: (BuildContext popoverContext) {
return URLEditorPopover(
@@ -246,7 +246,7 @@ class _CopyURLAccessoryState extends State<_CopyURLAccessory>
Widget build(BuildContext context) {
return svgWidget(
"editor/copy",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
);
}
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart
index b92f993382..8579a7e17a 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart
@@ -103,7 +103,7 @@ class _CloseButton extends StatelessWidget {
iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
icon: svgWidget(
"home/close",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
);
}
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/banner.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/banner.dart
index 0e85ff85db..8cd8e4decc 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/banner.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/banner.dart
@@ -34,7 +34,8 @@ class DocumentBanner extends StatelessWidget {
contentPadding: EdgeInsets.zero,
bgColor: Colors.transparent,
hoverColor: Theme.of(context).colorScheme.primary,
- downColor: Theme.of(context).colorScheme.primaryContainer,
+ highlightColor:
+ Theme.of(context).colorScheme.primaryContainer,
outlineColor: Colors.white,
borderRadius: Corners.s8Border,
onPressed: onRestore,
@@ -50,7 +51,7 @@ class DocumentBanner extends StatelessWidget {
contentPadding: EdgeInsets.zero,
bgColor: Colors.transparent,
hoverColor: Theme.of(context).colorScheme.primaryContainer,
- downColor: Theme.of(context).colorScheme.primary,
+ highlightColor: Theme.of(context).colorScheme.primary,
outlineColor: Colors.white,
borderRadius: Corners.s8Border,
onPressed: onDelete,
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart
index 37d6434e4d..13814ac186 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart
@@ -32,6 +32,7 @@ class _FontSizeSwitcherState extends State {
FlowyText.semibold(
LocaleKeys.moreAction_fontSize.tr(),
fontSize: 12,
+ color: Theme.of(context).colorScheme.tertiary,
),
const SizedBox(
height: 5,
@@ -43,9 +44,8 @@ class _FontSizeSwitcherState extends State {
_updateSelectedFontSize(_fontSizes[index].item2);
},
borderRadius: const BorderRadius.all(Radius.circular(5)),
- selectedBorderColor: Theme.of(context).colorScheme.primaryContainer,
- selectedColor: Theme.of(context).colorScheme.onSurface,
- fillColor: Theme.of(context).colorScheme.primaryContainer,
+ selectedColor: Theme.of(context).colorScheme.tertiary,
+ fillColor: Theme.of(context).colorScheme.primary,
color: Theme.of(context).hintColor,
constraints: const BoxConstraints(
minHeight: 40.0,
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart
index 5ed6219319..23c5895d52 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart
@@ -28,7 +28,7 @@ class DocumentMoreButton extends StatelessWidget {
child: svgWidget(
'editor/details',
size: const Size(18, 18),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
);
}
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/built_in_page_widget.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/built_in_page_widget.dart
index 3aa729d051..0df834c355 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/built_in_page_widget.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/built_in_page_widget.dart
@@ -119,7 +119,7 @@ class _BuiltInPageWidgetState extends State {
iconPadding: const EdgeInsets.all(3),
icon: svgWidget(
'common/information',
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
// Name
@@ -143,7 +143,7 @@ class _BuiltInPageWidgetState extends State {
iconPadding: const EdgeInsets.all(3),
icon: svgWidget(
'common/settings',
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
onPressed: () => controller.show(),
);
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/link_to_page_widget.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/link_to_page_widget.dart
index 73cfbeecb4..46c8298b49 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/link_to_page_widget.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/link_to_page_widget.dart
@@ -149,7 +149,7 @@ class _LinkToPageMenuState extends State {
FlowyButton(
leftIcon: svgWidget(
_iconName(value),
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
text: FlowyText.regular(value.name),
onTap: () => widget.onSelected(app.value1, value),
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/change_cover_popover.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/change_cover_popover.dart
index 9aa338b0bc..b339a1b3f0 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/change_cover_popover.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/change_cover_popover.dart
@@ -104,15 +104,24 @@ class _ChangeCoverPopoverState extends State {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- FlowyText.semibold(LocaleKeys.document_plugins_cover_colors.tr()),
+ FlowyText.semibold(
+ LocaleKeys.document_plugins_cover_colors.tr(),
+ color: Theme.of(context).colorScheme.tertiary,
+ ),
const SizedBox(height: 10),
_buildColorPickerList(),
const SizedBox(height: 10),
- FlowyText.semibold(LocaleKeys.document_plugins_cover_images.tr()),
+ FlowyText.semibold(
+ LocaleKeys.document_plugins_cover_images.tr(),
+ color: Theme.of(context).colorScheme.tertiary,
+ ),
const SizedBox(height: 10),
_buildFileImagePicker(),
const SizedBox(height: 10),
- FlowyText.semibold(LocaleKeys.document_plugins_cover_abstract.tr()),
+ FlowyText.semibold(
+ LocaleKeys.document_plugins_cover_abstract.tr(),
+ color: Theme.of(context).colorScheme.tertiary,
+ ),
const SizedBox(height: 10),
_buildAbstractImagePicker(),
],
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/cover_node_widget.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/cover_node_widget.dart
index 808962e019..8a7ac2807a 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/cover_node_widget.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/cover_node_widget.dart
@@ -156,10 +156,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
leftIconSize: const Size.square(18),
onTap: widget.onTap,
useIntrinsicWidth: true,
- leftIcon: svgWidget(
- 'editor/image',
- color: Theme.of(context).colorScheme.onSurface,
- ),
+ leftIcon: const FlowySvg(name: 'editor/image'),
text: FlowyText.regular(
LocaleKeys.document_plugins_cover_addCover.tr(),
),
@@ -174,7 +171,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
useIntrinsicWidth: true,
leftIcon: Icon(
Icons.emoji_emotions_outlined,
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
size: 18,
),
text: FlowyText.regular(LocaleKeys
@@ -197,8 +194,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
child: FlowyButton(
leftIconSize: const Size.square(18),
useIntrinsicWidth: true,
- leftIcon: Icon(Icons.emoji_emotions_outlined,
- color: Theme.of(context).colorScheme.onSurface,
+ leftIcon: const Icon(Icons.emoji_emotions_outlined,
size: 18),
text: FlowyText.regular(
LocaleKeys.document_plugins_cover_addIcon.tr()),
@@ -400,7 +396,7 @@ class _CoverImageState extends State<_CoverImage> {
popoverController.show();
},
hoverColor: Theme.of(context).colorScheme.surface,
- textColor: Theme.of(context).colorScheme.onSurface,
+ textColor: Theme.of(context).colorScheme.tertiary,
fillColor: Theme.of(context).colorScheme.surface.withOpacity(0.8),
width: 120,
height: 28,
@@ -422,7 +418,7 @@ class _CoverImageState extends State<_CoverImage> {
width: 28,
icon: svgWidget(
'editor/delete',
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).colorScheme.tertiary,
),
onPressed: () {
widget.onCoverChanged(CoverSelectionType.initial, null);
diff --git a/frontend/appflowy_flutter/lib/plugins/trash/menu.dart b/frontend/appflowy_flutter/lib/plugins/trash/menu.dart
index f3b73e5404..8708aa7563 100644
--- a/frontend/appflowy_flutter/lib/plugins/trash/menu.dart
+++ b/frontend/appflowy_flutter/lib/plugins/trash/menu.dart
@@ -45,13 +45,9 @@ class MenuTrash extends StatelessWidget {
Widget _render(BuildContext context) {
return Row(
children: [
- SizedBox(
- width: 16,
- height: 16,
- child: svgWidget(
- "home/trash",
- color: Theme.of(context).colorScheme.onSurface,
- ),
+ const FlowySvg(
+ size: Size(16, 16),
+ name: 'home/trash',
),
const HSpace(6),
FlowyText.medium(LocaleKeys.trash_text.tr()),
diff --git a/frontend/appflowy_flutter/lib/plugins/trash/src/trash_cell.dart b/frontend/appflowy_flutter/lib/plugins/trash/src/trash_cell.dart
index 058f6f842a..a46cca2a3b 100644
--- a/frontend/appflowy_flutter/lib/plugins/trash/src/trash_cell.dart
+++ b/frontend/appflowy_flutter/lib/plugins/trash/src/trash_cell.dart
@@ -43,7 +43,7 @@ class TrashCell extends StatelessWidget {
iconPadding: const EdgeInsets.all(5),
icon: svgWidget(
"editor/restore",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
const HSpace(20),
@@ -53,7 +53,7 @@ class TrashCell extends StatelessWidget {
iconPadding: const EdgeInsets.all(5),
icon: svgWidget(
"editor/delete",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
],
diff --git a/frontend/appflowy_flutter/lib/plugins/trash/trash_page.dart b/frontend/appflowy_flutter/lib/plugins/trash/trash_page.dart
index a0947a2de3..28460e9c59 100644
--- a/frontend/appflowy_flutter/lib/plugins/trash/trash_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/trash/trash_page.dart
@@ -90,6 +90,7 @@ class _TrashPageState extends State {
FlowyText.semibold(
LocaleKeys.trash_text.tr(),
fontSize: FontSizes.s16,
+ color: Theme.of(context).colorScheme.tertiary,
),
const Spacer(),
IntrinsicWidth(
@@ -97,7 +98,7 @@ class _TrashPageState extends State {
text: FlowyText.medium(LocaleKeys.trash_restoreAll.tr()),
leftIcon: svgWidget(
'editor/restore',
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
onTap: () => context.read().add(
const TrashEvent.restoreAll(),
@@ -110,7 +111,7 @@ class _TrashPageState extends State {
text: FlowyText.medium(LocaleKeys.trash_deleteAll.tr()),
leftIcon: svgWidget(
'editor/delete',
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
onTap: () =>
context.read().add(const TrashEvent.deleteAll()),
diff --git a/frontend/appflowy_flutter/lib/user/presentation/widgets/background.dart b/frontend/appflowy_flutter/lib/user/presentation/widgets/background.dart
index fe3bdd2a15..f7353ebd5a 100644
--- a/frontend/appflowy_flutter/lib/user/presentation/widgets/background.dart
+++ b/frontend/appflowy_flutter/lib/user/presentation/widgets/background.dart
@@ -49,6 +49,7 @@ class FlowyLogoTitle extends StatelessWidget {
FlowyText.semibold(
title,
fontSize: FontSizes.s24,
+ color: Theme.of(context).colorScheme.tertiary,
),
],
),
diff --git a/frontend/appflowy_flutter/lib/workspace/application/appearance.dart b/frontend/appflowy_flutter/lib/workspace/application/appearance.dart
index 9cadf7f5ce..b340b8612e 100644
--- a/frontend/appflowy_flutter/lib/workspace/application/appearance.dart
+++ b/frontend/appflowy_flutter/lib/workspace/application/appearance.dart
@@ -212,14 +212,20 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
return ThemeData(
brightness: brightness,
- textTheme:
- _getTextTheme(fontFamily: fontFamily, fontColor: theme.shader1),
+ textTheme: _getTextTheme(fontFamily: fontFamily, fontColor: theme.text),
textSelectionTheme: TextSelectionThemeData(
cursorColor: theme.main2,
selectionHandleColor: theme.main2,
),
- primaryIconTheme: IconThemeData(color: theme.hover),
- iconTheme: IconThemeData(color: theme.shader1),
+ iconTheme: IconThemeData(color: theme.icon),
+ tooltipTheme: TooltipThemeData(
+ textStyle: _getFontStyle(
+ fontFamily: fontFamily,
+ fontSize: FontSizes.s11,
+ fontWeight: FontWeight.w400,
+ fontColor: theme.surface,
+ ),
+ ),
scrollbarTheme: ScrollbarThemeData(
thumbColor: MaterialStateProperty.all(theme.shader3),
thickness: MaterialStateProperty.resolveWith((states) {
@@ -239,30 +245,38 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
canvasColor: theme.shader6,
- dividerColor: theme.shader6,
- hintColor: theme.shader3,
+ dividerColor: theme.divider,
+ hintColor: theme.hint,
+ //action item hover color
+ hoverColor: theme.hoverBG2,
disabledColor: theme.shader4,
highlightColor: theme.main1,
indicatorColor: theme.main1,
toggleableActiveColor: theme.main1,
+ cardColor: theme.input,
colorScheme: ColorScheme(
brightness: brightness,
- primary: theme.main1,
- onPrimary: _white,
+ primary: theme.primary,
+ onPrimary: theme.onPrimary,
primaryContainer: theme.main2,
onPrimaryContainer: _white,
- secondary: theme.hover,
+ // page title hover color
+ secondary: theme.hoverBG1,
onSecondary: theme.shader1,
+ // setting value hover color
secondaryContainer: theme.selector,
- onSecondaryContainer: theme.shader1,
+ onSecondaryContainer: theme.topbarBg,
+ tertiary: theme.shader7,
+ tertiaryContainer: theme.questionBubbleBG,
background: theme.surface,
- onBackground: theme.shader1,
+ onBackground: theme.text,
surface: theme.surface,
- onSurface: theme.shader1,
+ // text&icon color when it is hovered
+ onSurface: theme.hoverFG,
onError: theme.shader7,
error: theme.red,
outline: theme.shader4,
- surfaceVariant: theme.bg1,
+ surfaceVariant: theme.sidebarBg,
shadow: theme.shadow,
),
extensions: [
@@ -278,7 +292,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
tint7: theme.tint7,
tint8: theme.tint8,
tint9: theme.tint9,
- greyHover: theme.bg2,
+ greyHover: theme.hoverBG1,
greySelect: theme.bg3,
lightGreyHover: theme.shader6,
toggleOffFill: theme.shader5,
diff --git a/frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart b/frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart
index c666d77b2d..200ce23686 100644
--- a/frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart
+++ b/frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart
@@ -36,7 +36,7 @@ extension ViewExtension on ViewPB {
Widget renderThumbnail({Color? iconColor}) {
String thumbnail = "file_icon";
- final Widget widget = svgWidget(thumbnail, color: iconColor);
+ final Widget widget = FlowySvg(name: thumbnail);
return widget;
}
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart
index 6a5bc0e1d4..e73577d818 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart
@@ -199,7 +199,7 @@ class HomeTopBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
- color: Theme.of(context).colorScheme.surface,
+ color: Theme.of(context).colorScheme.onSecondaryContainer,
height: HomeSizes.topBarHeight,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/create_button.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/create_button.dart
index d5584173bd..be6fddf37a 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/create_button.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/create_button.dart
@@ -18,9 +18,14 @@ class NewAppButton extends StatelessWidget {
LocaleKeys.newPageText.tr(),
fillColor: Colors.transparent,
hoverColor: Colors.transparent,
- fontColor: Theme.of(context).colorScheme.onSurfaceVariant,
+ fontColor: Theme.of(context).colorScheme.tertiary,
onPressed: () async => await _showCreateAppDialog(context),
- heading: svgWidget("home/new_app", size: const Size(16, 16)),
+ heading: Theme.of(context).brightness == Brightness.light
+ ? svgWidget("home/new_app", size: const Size(16, 16))
+ : svgWidget(
+ "home/new_app_dark",
+ size: const Size(16, 16),
+ ),
padding: EdgeInsets.symmetric(horizontal: Insets.l, vertical: 20),
);
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart
index 351012bc38..2b55fd736d 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart
@@ -6,9 +6,9 @@ import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
import 'package:appflowy_editor/appflowy_editor.dart' show Document;
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra_ui/style_widget/icon_button.dart';
+import 'package:flowy_infra/theme_extension.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flutter/material.dart';
-import 'package:styled_widget/styled_widget.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:easy_localization/easy_localization.dart';
@@ -50,13 +50,19 @@ class AddButton extends StatelessWidget {
actions: actions,
offset: const Offset(0, 8),
buildChild: (controller) {
- return FlowyIconButton(
+ return SizedBox(
width: 22,
- onPressed: () => controller.show(),
- icon: svgWidget(
- "home/add",
- color: Theme.of(context).colorScheme.onSurface,
- ).padding(horizontal: 3, vertical: 3),
+ child: InkWell(
+ onTap: () => controller.show(),
+ child: FlowyHover(
+ style: HoverStyle(
+ hoverColor: AFThemeExtension.of(context).greySelect,
+ ),
+ builder: (context, onHover) => const FlowySvg(
+ name: 'home/add',
+ ),
+ ),
+ ),
);
},
onSelected: (action, controller) {
@@ -83,8 +89,7 @@ class AddButtonActionWrapper extends ActionCell {
AddButtonActionWrapper({required this.pluginBuilder});
@override
- Widget? leftIcon(Color iconColor) =>
- svgWidget(pluginBuilder.menuIcon, color: iconColor);
+ Widget? leftIcon(Color iconColor) => FlowySvg(name: pluginBuilder.menuIcon);
@override
String get name => pluginBuilder.menuName;
@@ -100,9 +105,8 @@ class ImportActionWrapper extends ActionCell {
});
@override
- Widget? leftIcon(Color iconColor) => svgWidget(
- 'editor/import',
- color: iconColor,
+ Widget? leftIcon(Color iconColor) => const FlowySvg(
+ name: 'editor/import',
);
@override
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/header.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/header.dart
index e94f7380ea..c2161066c9 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/header.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/header.dart
@@ -5,7 +5,6 @@ import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:expandable/expandable.dart';
-import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra/icon_data.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:appflowy_backend/protobuf/flowy-folder/app.pb.dart';
@@ -15,7 +14,6 @@ import 'package:appflowy/workspace/application/app/app_bloc.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:flowy_infra/image.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
import '../menu_app.dart';
import 'add_button.dart';
@@ -58,7 +56,7 @@ class MenuAppHeader extends StatelessWidget {
theme: ExpandableThemeData(
expandIcon: FlowyIconData.drop_down_show,
collapseIcon: FlowyIconData.drop_down_hide,
- iconColor: Theme.of(context).colorScheme.onSurface,
+ iconColor: Theme.of(context).colorScheme.tertiary,
iconSize: MenuAppSizes.iconSize,
iconPadding: const EdgeInsets.fromLTRB(0, 0, 10, 0),
hasIcon: false,
@@ -104,7 +102,6 @@ class MenuAppHeader extends StatelessWidget {
Widget _renderCreateViewButton(BuildContext context) {
return Tooltip(
message: LocaleKeys.menuAppHeader_addPageTooltip.tr(),
- textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
child: AddButton(
onSelected: (pluginBuilder, document) {
context.read().add(
@@ -139,9 +136,9 @@ extension AppDisclosureExtension on AppDisclosureAction {
Widget icon(Color iconColor) {
switch (this) {
case AppDisclosureAction.rename:
- return svgWidget('editor/edit', color: iconColor);
+ return const FlowySvg(name: 'editor/edit');
case AppDisclosureAction.delete:
- return svgWidget('editor/delete', color: iconColor);
+ return const FlowySvg(name: 'editor/delete');
}
}
}
@@ -174,6 +171,7 @@ class AppActionList extends StatelessWidget {
builder: (context, app) => FlowyText.medium(
app.name,
overflow: TextOverflow.ellipsis,
+ color: Theme.of(context).colorScheme.tertiary,
),
),
);
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/import/import_panel.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/import/import_panel.dart
index 0250f443d0..f1996af8f8 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/import/import_panel.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/import/import_panel.dart
@@ -24,6 +24,7 @@ Future showImportPanel(
title: FlowyText.semibold(
LocaleKeys.moreAction_import.tr(),
fontSize: 20,
+ color: Theme.of(context).colorScheme.tertiary,
),
content: _ImportPanel(importCallback: callback),
contentPadding: const EdgeInsets.symmetric(
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/section/item.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/section/item.dart
index f261a946a9..e6d328d797 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/section/item.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/section/item.dart
@@ -4,7 +4,6 @@ import 'package:appflowy/workspace/application/view/view_ext.dart';
import 'package:appflowy/workspace/presentation/home/menu/menu.dart';
import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -51,7 +50,7 @@ class ViewSectionItem extends StatelessWidget {
onTap: () => onSelected(blocContext.read().state.view),
child: FlowyHover(
style: HoverStyle(
- hoverColor: AFThemeExtension.of(context).greySelect,
+ hoverColor: Theme.of(context).colorScheme.secondary,
),
// If current state.isEditing is true, the hover should not
// rebuild when onEnter/onExit events happened.
@@ -60,7 +59,6 @@ class ViewSectionItem extends StatelessWidget {
blocContext,
onHover,
state,
- Theme.of(context).colorScheme.onSurface,
),
isSelected: () => state.isEditing || isSelected,
),
@@ -75,13 +73,12 @@ class ViewSectionItem extends StatelessWidget {
BuildContext blocContext,
bool onHover,
ViewState state,
- Color iconColor,
) {
List children = [
SizedBox(
width: 16,
height: 16,
- child: state.view.renderThumbnail(iconColor: iconColor),
+ child: state.view.renderThumbnail(),
),
const HSpace(2),
Expanded(
@@ -154,11 +151,11 @@ extension ViewDisclosureExtension on ViewDisclosureAction {
Widget icon(Color iconColor) {
switch (this) {
case ViewDisclosureAction.rename:
- return svgWidget('editor/edit', color: iconColor);
+ return const FlowySvg(name: 'editor/edit');
case ViewDisclosureAction.delete:
- return svgWidget('editor/delete', color: iconColor);
+ return const FlowySvg(name: 'editor/delete');
case ViewDisclosureAction.duplicate:
- return svgWidget('editor/copy', color: iconColor);
+ return const FlowySvg(name: 'editor/copy');
}
}
}
@@ -186,7 +183,7 @@ class ViewDisclosureButton extends StatelessWidget {
width: 26,
icon: svgWidget(
"editor/details",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
onPressed: () {
onEdit(true);
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu.dart
index 92f5f4621b..11cfa05042 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu.dart
@@ -229,7 +229,7 @@ class MenuTopBar extends StatelessWidget {
iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
icon: svgWidget(
"home/hide_menu",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
),
)
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu_user.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu_user.dart
index 21cc90a04e..236dd60479 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu_user.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu_user.dart
@@ -2,7 +2,6 @@ import 'package:appflowy/startup/startup.dart';
import 'package:appflowy/workspace/application/menu/menu_user_bloc.dart';
import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_view.dart';
-import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -13,7 +12,6 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:easy_localization/easy_localization.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
class MenuUser extends StatelessWidget {
final UserProfilePB user;
@@ -69,6 +67,7 @@ class MenuUser extends StatelessWidget {
return FlowyText.medium(
name,
overflow: TextOverflow.ellipsis,
+ color: Theme.of(context).colorScheme.tertiary,
);
}
@@ -76,7 +75,6 @@ class MenuUser extends StatelessWidget {
final userProfile = context.read().state.userProfile;
return Tooltip(
message: LocaleKeys.settings_menu_open.tr(),
- textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
child: IconButton(
onPressed: () {
showDialog(
@@ -90,7 +88,7 @@ class MenuUser extends StatelessWidget {
dimension: 20,
child: svgWidget(
"home/settings",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).colorScheme.tertiary,
),
),
),
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart
index f1818fc162..8fcc3b2f19 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart
@@ -6,14 +6,12 @@ import 'package:appflowy/workspace/presentation/home/home_stack.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/style_widget/icon_button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:provider/provider.dart';
import 'package:styled_widget/styled_widget.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
typedef NaviAction = void Function();
@@ -87,7 +85,7 @@ class FlowyNavigation extends StatelessWidget {
iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
icon: svgWidget(
"home/hide_menu",
- color: Theme.of(context).colorScheme.onSurface,
+ color: Theme.of(context).iconTheme.color,
),
)),
);
@@ -180,11 +178,9 @@ TextSpan sidebarTooltipTextSpan(BuildContext context, String hintText) =>
children: [
TextSpan(
text: "$hintText\n",
- style: AFThemeExtension.of(context).callout.textColor(Colors.white),
),
TextSpan(
text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
- style: AFThemeExtension.of(context).caption.textColor(Colors.white60),
),
],
);
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/settings_dialog.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/settings_dialog.dart
index d7b3f35a17..09e719c2e4 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/settings_dialog.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/settings_dialog.dart
@@ -32,6 +32,7 @@ class SettingsDialog extends StatelessWidget {
LocaleKeys.settings_title.tr(),
fontSize: 20,
fontWeight: FontWeight.w700,
+ color: Theme.of(context).colorScheme.tertiary,
),
),
child: ScaffoldMessenger(
@@ -54,7 +55,9 @@ class SettingsDialog extends StatelessWidget {
context.read().state.page,
),
),
- const VerticalDivider(),
+ VerticalDivider(
+ color: Theme.of(context).dividerColor,
+ ),
const SizedBox(width: 10),
Expanded(
child: getSettingsView(
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
index d4e93b3548..81149f9f34 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
@@ -50,8 +50,8 @@ class ThemeSetting extends StatelessWidget {
direction: PopoverDirection.bottomWithRightAligned,
child: FlowyTextButton(
currentTheme,
+ fontColor: Theme.of(context).colorScheme.onBackground,
fillColor: Colors.transparent,
- hoverColor: Theme.of(context).colorScheme.secondary,
onPressed: () {},
),
popupBuilder: (BuildContext context) {
@@ -107,8 +107,8 @@ class ThemeModeSetting extends StatelessWidget {
direction: PopoverDirection.bottomWithRightAligned,
child: FlowyTextButton(
_themeModeLabelText(currentThemeMode),
+ fontColor: Theme.of(context).colorScheme.onBackground,
fillColor: Colors.transparent,
- hoverColor: Theme.of(context).colorScheme.secondary,
onPressed: () {},
),
popupBuilder: (BuildContext context) {
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_language_view.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_language_view.dart
index 7b76aa6157..2807554195 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_language_view.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_language_view.dart
@@ -47,7 +47,7 @@ class _LanguageSelectorDropdownState extends State {
void hoverEnterLanguage() {
setState(() {
- currHoverColor = Theme.of(context).colorScheme.primary;
+ currHoverColor = Theme.of(context).colorScheme.secondaryContainer;
});
}
@@ -67,6 +67,7 @@ class _LanguageSelectorDropdownState extends State {
padding: const EdgeInsets.symmetric(horizontal: 6),
child: DropdownButton(
value: context.locale,
+ dropdownColor: Theme.of(context).cardColor,
onChanged: (locale) {
context
.read()
@@ -80,7 +81,10 @@ class _LanguageSelectorDropdownState extends State {
value: locale,
child: Padding(
padding: const EdgeInsets.all(12.0),
- child: FlowyText.medium(languageFromLocale(locale)),
+ child: FlowyText.medium(
+ languageFromLocale(locale),
+ color: Theme.of(context).colorScheme.tertiary,
+ ),
),
);
}).toList(),
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu_element.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu_element.dart
index 7e6f4e7060..207b03c78f 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu_element.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu_element.dart
@@ -1,5 +1,6 @@
import 'package:appflowy/workspace/application/settings/settings_dialog_bloc.dart';
import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flutter/material.dart';
@@ -21,29 +22,32 @@ class SettingsMenuElement extends StatelessWidget {
@override
Widget build(BuildContext context) {
- return ListTile(
- leading: Icon(
- icon,
- size: 16,
- color: page == selectedPage
- ? Theme.of(context).colorScheme.onSurface
- : Theme.of(context).colorScheme.onSurface,
+ return FlowyHover(
+ style: HoverStyle(
+ hoverColor: Theme.of(context).colorScheme.primary,
),
- onTap: () {
- changeSelectedPage(page);
- },
- selected: page == selectedPage,
- selectedColor: Theme.of(context).colorScheme.onSurface,
- selectedTileColor: Theme.of(context).colorScheme.primaryContainer,
- hoverColor: Theme.of(context).colorScheme.primary,
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(5),
- ),
- minLeadingWidth: 0,
- title: FlowyText.semibold(
- label,
- fontSize: FontSizes.s14,
- overflow: TextOverflow.ellipsis,
+ child: ListTile(
+ leading: Icon(icon,
+ size: 16,
+ color: page == selectedPage
+ ? Theme.of(context).colorScheme.onSurface
+ : null),
+ onTap: () {
+ changeSelectedPage(page);
+ },
+ selected: page == selectedPage,
+ selectedColor: Theme.of(context).colorScheme.onSurface,
+ selectedTileColor: Theme.of(context).colorScheme.primary,
+ shape: RoundedRectangleBorder(
+ borderRadius: BorderRadius.circular(5),
+ ),
+ minLeadingWidth: 0,
+ title: FlowyText.semibold(label,
+ fontSize: FontSizes.s14,
+ overflow: TextOverflow.ellipsis,
+ color: page == selectedPage
+ ? Theme.of(context).colorScheme.onSurface
+ : null),
),
);
}
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
index c6bb7f3ca0..e6ecf09270 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
@@ -48,6 +48,9 @@ class BubbleActionList extends StatelessWidget {
'?',
tooltip: LocaleKeys.questionBubble_help.tr(),
fontWeight: FontWeight.w600,
+ fontColor: Theme.of(context).colorScheme.tertiary,
+ fillColor: Theme.of(context).colorScheme.tertiaryContainer,
+ hoverColor: Theme.of(context).colorScheme.tertiaryContainer,
mainAxisAlignment: MainAxisAlignment.center,
radius: Corners.s10Border,
onPressed: () => controller.show(),
diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart
index 76d274f4c8..b109dbad8d 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart
@@ -56,6 +56,22 @@ abstract class FlowyColorScheme {
final Color main1;
final Color main2;
final Color shadow;
+ final Color sidebarBg;
+ final Color divider;
+ final Color topbarBg;
+ final Color icon;
+ final Color text;
+ final Color input;
+ final Color hint;
+ final Color primary;
+ final Color onPrimary;
+ //page title hover effect
+ final Color hoverBG1;
+ //action item hover effect
+ final Color hoverBG2;
+ //the text color when it is hovered
+ final Color hoverFG;
+ final Color questionBubbleBG;
const FlowyColorScheme({
required this.surface,
@@ -87,6 +103,19 @@ abstract class FlowyColorScheme {
required this.main1,
required this.main2,
required this.shadow,
+ required this.sidebarBg,
+ required this.divider,
+ required this.topbarBg,
+ required this.icon,
+ required this.text,
+ required this.input,
+ required this.hint,
+ required this.primary,
+ required this.onPrimary,
+ required this.hoverBG1,
+ required this.hoverBG2,
+ required this.hoverFG,
+ required this.questionBubbleBG,
});
factory FlowyColorScheme.builtIn(String themeName, Brightness brightness) {
diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart
index 21492f43b4..00655eef21 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart
@@ -4,6 +4,21 @@ import 'colorscheme.dart';
const _black = Color(0xff000000);
const _white = Color(0xFFFFFFFF);
+const _lightHover = Color(0xFFe0f8ff);
+const _lightSelector = Color(0xfff2fcff);
+const _lightBg1 = Color(0xFFFFD13E);
+const _lightBg2 = Color(0xffedeef2);
+const _lightShader1 = Color(0xff333333);
+const _lightShader3 = Color(0xff828282);
+const _lightShader6 = Color(0xfff2f2f2);
+const _lightMain1 = Color(0xffe21f74);
+
+const _darkShader1 = Color(0xff131720);
+const _darkShader2 = Color(0xff1A202C);
+const _darkShader3 = Color(0xff363D49);
+const _darkShader5 = Color(0xffBBC3CD);
+const _darkShader6 = Color(0xffF2F2F2);
+const _darkMain1 = Color(0xffe21f74);
class DandelionColorScheme extends FlowyColorScheme {
const DandelionColorScheme.light()
@@ -20,8 +35,8 @@ class DandelionColorScheme extends FlowyColorScheme {
shader4: const Color(0xffbdbdbd),
shader5: const Color(0xffe0e0e0),
shader6: const Color(0xfff2f2f2),
- shader7: const Color(0xffffffff),
- bg1: const Color(0xFFFFD13E),
+ shader7: _black,
+ bg1: _lightBg1,
bg2: const Color(0xffedeef2),
bg3: const Color(0xffe2e4eb),
bg4: const Color(0xff2c144b),
@@ -34,9 +49,22 @@ class DandelionColorScheme extends FlowyColorScheme {
tint7: const Color(0xffddffd6),
tint8: const Color(0xffdefff1),
tint9: const Color(0xffe1fbff),
- main1: const Color(0xffe21f74),
+ main1: _lightMain1,
main2: const Color.fromARGB(255, 224, 25, 111),
shadow: _black,
+ sidebarBg: _lightBg1,
+ divider: _lightShader6,
+ topbarBg: _white,
+ icon: _lightShader1,
+ text: _lightShader1,
+ input: _white,
+ hint: _lightShader3,
+ primary: _lightMain1,
+ onPrimary: _white,
+ hoverBG1: _lightBg2,
+ hoverBG2: _lightHover,
+ hoverFG: _lightShader1,
+ questionBubbleBG: _lightSelector,
);
const DandelionColorScheme.dark()
@@ -48,12 +76,12 @@ class DandelionColorScheme extends FlowyColorScheme {
yellow: const Color(0xffffd667),
green: const Color(0xff66cf80),
shader1: _white,
- shader2: const Color(0xffffffff),
+ shader2: _darkShader2,
shader3: const Color(0xff828282),
shader4: const Color(0xffbdbdbd),
- shader5: _white,
- shader6: _black,
- shader7: _black,
+ shader5: _darkShader5,
+ shader6: _darkShader6,
+ shader7: _white,
bg1: const Color(0xFFD5A200),
bg2: _black,
bg3: const Color(0xff4f4f4f),
@@ -67,8 +95,21 @@ class DandelionColorScheme extends FlowyColorScheme {
tint7: const Color(0xffbcffad),
tint8: const Color(0xffadffe2),
tint9: const Color(0xffade4ff),
- main1: const Color(0xffe21f74),
+ main1: _darkMain1,
main2: const Color.fromARGB(255, 224, 25, 111),
shadow: _black,
+ sidebarBg: const Color(0xff232B38),
+ divider: _darkShader3,
+ topbarBg: _darkShader1,
+ icon: _darkShader5,
+ text: _darkShader5,
+ input: const Color(0xff282E3A),
+ hint: _darkShader5,
+ primary: _darkMain1,
+ onPrimary: _darkShader1,
+ hoverBG1: _darkMain1,
+ hoverBG2: _darkMain1,
+ hoverFG: _darkShader1,
+ questionBubbleBG: _darkShader3,
);
}
diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
index accd81a07e..590b5c7bc6 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
@@ -4,25 +4,39 @@ import 'colorscheme.dart';
const _black = Color(0xff000000);
const _white = Color(0xFFFFFFFF);
+const _lightHover = Color(0xFFe0f8ff);
+const _lightSelector = Color(0xfff2fcff);
+const _lightBg1 = Color(0xfff7f8fc);
+const _lightBg2 = Color(0xffedeef2);
+const _lightShader1 = Color(0xff333333);
+const _lightShader3 = Color(0xff828282);
+const _lightShader6 = Color(0xfff2f2f2);
+const _lightMain1 = Color(0xff00bcf0);
+const _darkShader1 = Color(0xff131720);
+const _darkShader2 = Color(0xff1A202C);
+const _darkShader3 = Color(0xff363D49);
+const _darkShader5 = Color(0xffBBC3CD);
+const _darkShader6 = Color(0xffF2F2F2);
+const _darkMain1 = Color(0xff00BCF0);
class DefaultColorScheme extends FlowyColorScheme {
const DefaultColorScheme.light()
: super(
- surface: Colors.white,
- hover: const Color(0xFFe0f8ff),
- selector: const Color(0xfff2fcff),
+ surface: _white,
+ hover: _lightHover,
+ selector: _lightSelector,
red: const Color(0xfffb006d),
yellow: const Color(0xffffd667),
green: const Color(0xff66cf80),
- shader1: const Color(0xff333333),
+ shader1: _lightShader1,
shader2: const Color(0xff4f4f4f),
- shader3: const Color(0xff828282),
+ shader3: _lightShader3,
shader4: const Color(0xffbdbdbd),
shader5: const Color(0xffe0e0e0),
- shader6: const Color(0xfff2f2f2),
- shader7: const Color(0xffffffff),
- bg1: const Color(0xfff7f8fc),
- bg2: const Color(0xffedeef2),
+ shader6: _lightShader6,
+ shader7: _lightShader1,
+ bg1: _lightBg1,
+ bg2: _lightBg2,
bg3: const Color(0xffe2e4eb),
bg4: const Color(0xff2c144b),
tint1: const Color(0xffe8e0ff),
@@ -34,41 +48,67 @@ class DefaultColorScheme extends FlowyColorScheme {
tint7: const Color(0xffddffd6),
tint8: const Color(0xffdefff1),
tint9: const Color(0xffe1fbff),
- main1: const Color(0xff00bcf0),
+ main1: _lightMain1,
main2: const Color(0xff00b7ea),
shadow: _black,
+ sidebarBg: _lightBg1,
+ divider: _lightShader6,
+ topbarBg: _white,
+ icon: _lightShader1,
+ text: _lightShader1,
+ input: _white,
+ hint: _lightShader3,
+ primary: _lightMain1,
+ onPrimary: _white,
+ hoverBG1: _lightBg2,
+ hoverBG2: _lightHover,
+ hoverFG: _lightShader1,
+ questionBubbleBG: _lightSelector,
);
const DefaultColorScheme.dark()
: super(
- surface: const Color(0xff292929),
- hover: const Color(0xff1f1f1f),
- selector: const Color(0xff333333),
+ surface: _darkShader2,
+ hover: _darkMain1,
+ selector: _darkShader2,
red: const Color(0xfffb006d),
- yellow: const Color(0xffffd667),
- green: const Color(0xff66cf80),
- shader1: _white,
- shader2: const Color(0xffffffff),
- shader3: const Color(0xff828282),
- shader4: const Color(0xffbdbdbd),
- shader5: _white,
- shader6: _black,
- shader7: _black,
- bg1: _black,
- bg2: _black,
- bg3: const Color(0xff4f4f4f),
- bg4: const Color(0xff2c144b),
- tint1: const Color(0xffc3adff),
- tint2: const Color(0xffffadf9),
- tint3: const Color(0xffffadad),
- tint4: const Color(0xffffcfad),
- tint5: const Color(0xfffffead),
- tint6: const Color(0xffe6ffa3),
- tint7: const Color(0xffbcffad),
- tint8: const Color(0xffadffe2),
- tint9: const Color(0xffade4ff),
- main1: const Color(0xff00bcf0),
- main2: const Color(0xff009cc7),
- shadow: _black,
+ yellow: const Color(0xffF7CF46),
+ green: const Color(0xff66CF80),
+ shader1: _darkShader1,
+ shader2: _darkShader2,
+ shader3: _darkShader3,
+ shader4: const Color(0xff7C8CA5),
+ shader5: _darkShader5,
+ shader6: _darkShader6,
+ shader7: _white,
+ bg1: const Color(0xffF7F8FC),
+ 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),
+ main1: _darkMain1,
+ main2: const Color(0xff00B7EA),
+ shadow: const Color(0xff0F131C),
+ sidebarBg: const Color(0xff232B38),
+ divider: _darkShader3,
+ topbarBg: _darkShader1,
+ icon: _darkShader5,
+ text: _darkShader5,
+ input: const Color(0xff282E3A),
+ hint: _darkShader5,
+ primary: _darkMain1,
+ onPrimary: _darkShader1,
+ hoverBG1: _darkMain1,
+ hoverBG2: _darkMain1,
+ hoverFG: _darkShader1,
+ questionBubbleBG: _darkShader3,
);
}
diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart
index 7012077250..83f0557349 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart
@@ -5,6 +5,22 @@ import 'colorscheme.dart';
const _black = Color(0xff000000);
const _white = Color(0xFFFFFFFF);
+const _lightHover = Color(0xFFe0f8ff);
+const _lightSelector = Color(0xfff2fcff);
+const _lightBg1 = Color(0xfff7f8fc);
+const _lightBg2 = Color(0xffedeef2);
+const _lightShader1 = Color(0xff333333);
+const _lightShader3 = Color(0xff828282);
+const _lightShader6 = Color(0xfff2f2f2);
+const _lightMain1 = Color(0xffA652FB);
+
+const _darkShader1 = Color(0xff131720);
+const _darkShader2 = Color(0xff1A202C);
+const _darkShader3 = Color(0xff363D49);
+const _darkShader5 = Color(0xffBBC3CD);
+const _darkShader6 = Color(0xffF2F2F2);
+const _darkMain1 = Color(0xffA652FB);
+
class LavenderColorScheme extends FlowyColorScheme {
const LavenderColorScheme.light()
: super(
@@ -20,7 +36,7 @@ class LavenderColorScheme extends FlowyColorScheme {
shader4: const Color(0xffbdbdbd),
shader5: const Color(0xffe0e0e0),
shader6: const Color(0xfff2f2f2),
- shader7: const Color(0xffffffff),
+ shader7: _black,
bg1: const Color(0xffAC59FF),
bg2: const Color(0xffedeef2),
bg3: const Color(0xffe2e4eb),
@@ -34,9 +50,22 @@ class LavenderColorScheme extends FlowyColorScheme {
tint7: const Color(0xffddffd6),
tint8: const Color(0xffdefff1),
tint9: const Color(0xffe1fbff),
- main1: const Color(0xffA652FB),
+ main1: _lightMain1,
main2: const Color(0xff9327FF),
shadow: _black,
+ sidebarBg: _lightBg1,
+ divider: _lightShader6,
+ topbarBg: _white,
+ icon: _lightShader1,
+ text: _lightShader1,
+ input: _white,
+ hint: _lightShader3,
+ primary: _lightMain1,
+ onPrimary: _white,
+ hoverBG1: _lightBg2,
+ hoverBG2: _lightHover,
+ hoverFG: _lightShader1,
+ questionBubbleBG: _lightSelector,
);
const LavenderColorScheme.dark()
@@ -48,12 +77,12 @@ class LavenderColorScheme extends FlowyColorScheme {
yellow: const Color(0xffffd667),
green: const Color(0xff66cf80),
shader1: _white,
- shader2: const Color(0xffffffff),
+ shader2: _darkShader2,
shader3: const Color(0xff828282),
shader4: const Color(0xffbdbdbd),
shader5: _white,
- shader6: _black,
- shader7: _black,
+ shader6: _darkShader6,
+ shader7: _white,
bg1: const Color(0xff8C23F6),
bg2: _black,
bg3: const Color(0xff4f4f4f),
@@ -67,8 +96,21 @@ class LavenderColorScheme extends FlowyColorScheme {
tint7: const Color(0xffbcffad),
tint8: const Color(0xffadffe2),
tint9: const Color(0xffade4ff),
- main1: const Color(0xffA652FB),
+ main1: _darkMain1,
main2: const Color(0xff9327FF),
shadow: _black,
+ sidebarBg: const Color(0xff232B38),
+ divider: _darkShader3,
+ topbarBg: _darkShader1,
+ icon: _darkShader5,
+ text: _darkShader5,
+ input: const Color(0xff282E3A),
+ hint: _darkShader5,
+ primary: _darkMain1,
+ onPrimary: _darkShader1,
+ hoverBG1: _darkMain1,
+ hoverBG2: _darkMain1,
+ hoverFG: _darkShader1,
+ questionBubbleBG: _darkShader3,
);
}
diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/image.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/image.dart
index 4ed4da10bf..577e3c182a 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/image.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/image.dart
@@ -1,6 +1,30 @@
-import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
+import 'package:flutter/material.dart';
+
+/// For icon that needs to change color when it is on hovered
+///
+/// Get the hover color from ThemeData
+class FlowySvg extends StatelessWidget {
+ const FlowySvg({super.key, this.size, required this.name});
+ final String name;
+ final Size? size;
+
+ @override
+ Widget build(BuildContext context) {
+ if (size != null) {
+ return SizedBox.fromSize(
+ size: size,
+ child: SvgPicture.asset('assets/images/$name.svg',
+ color: Theme.of(context).iconTheme.color),
+ );
+ } else {
+ return SvgPicture.asset('assets/images/$name.svg',
+ color: Theme.of(context).iconTheme.color);
+ }
+ }
+}
+
Widget svgWidget(String name, {Size? size, Color? color}) {
if (size != null) {
return SizedBox.fromSize(
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart
index 3673720220..1fcc19fb11 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart
@@ -81,7 +81,7 @@ class _PopoverContainer extends StatelessWidget {
Widget build(BuildContext context) {
final decoration = this.decoration ??
FlowyDecoration.decoration(
- Theme.of(context).colorScheme.surface,
+ Theme.of(context).cardColor,
Theme.of(context).colorScheme.shadow.withOpacity(0.15),
);
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_dialog.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_dialog.dart
index f8cc85938b..033f5d2a5d 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_dialog.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_dialog.dart
@@ -26,6 +26,7 @@ class FlowyDialog extends StatelessWidget {
final size = windowSize * 0.7;
return SimpleDialog(
contentPadding: EdgeInsets.zero,
+ backgroundColor: Theme.of(context).cardColor,
title: title,
shape: shape ??
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart
index 3c958a160a..22b1ff81e8 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart
@@ -1,11 +1,9 @@
-import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flutter/material.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
class FlowyButton extends StatelessWidget {
final Widget text;
@@ -177,7 +175,8 @@ class FlowyTextButton extends StatelessWidget {
highlightElevation: 0,
shape: RoundedRectangleBorder(borderRadius: radius ?? Corners.s6Border),
fillColor: fillColor ?? Theme.of(context).colorScheme.secondaryContainer,
- hoverColor: hoverColor ?? Theme.of(context).colorScheme.secondary,
+ hoverColor:
+ hoverColor ?? Theme.of(context).colorScheme.secondaryContainer,
focusColor: Colors.transparent,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
@@ -195,7 +194,6 @@ class FlowyTextButton extends StatelessWidget {
if (tooltip != null) {
child = Tooltip(
message: tooltip!,
- textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
child: child,
);
}
@@ -285,7 +283,6 @@ class FlowyRichTextButton extends StatelessWidget {
if (tooltip != null) {
child = Tooltip(
message: tooltip!,
- textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
child: child,
);
}
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/hover.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/hover.dart
index 8d8b64dcf3..bf9d255e2f 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/hover.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/hover.dart
@@ -137,7 +137,22 @@ class FlowyHoverContainer extends StatelessWidget {
color: style.hoverColor ?? Theme.of(context).colorScheme.secondary,
borderRadius: style.borderRadius,
),
- child: child,
+ child:
+ //override text's theme with new color when it is hovered
+ Theme(
+ data: Theme.of(context).copyWith(
+ textTheme: Theme.of(context).textTheme.copyWith(
+ bodyMedium: Theme.of(context)
+ .textTheme
+ .bodyMedium
+ ?.copyWith(color: Theme.of(context).colorScheme.onSurface),
+ ),
+ iconTheme: Theme.of(context)
+ .iconTheme
+ .copyWith(color: Theme.of(context).colorScheme.onSurface),
+ ),
+ child: child!,
+ ),
);
}
}
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
index 4aefb7dd55..b9c5894b3a 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
@@ -9,7 +9,7 @@ class BaseStyledButton extends StatefulWidget {
final Color? bgColor;
final Color? focusColor;
final Color? hoverColor;
- final Color? downColor;
+ final Color? highlightColor;
final EdgeInsets? contentPadding;
final double? minWidth;
final double? minHeight;
@@ -34,7 +34,7 @@ class BaseStyledButton extends StatefulWidget {
this.minHeight,
this.borderRadius,
this.hoverColor,
- this.downColor,
+ this.highlightColor,
this.shape,
this.useBtnText = true,
this.autoFocus = false,
@@ -116,10 +116,8 @@ class BaseStyledBtnState extends State {
highlightElevation: 0,
focusElevation: 0,
fillColor: Colors.transparent,
- hoverColor:
- widget.hoverColor ?? Theme.of(context).colorScheme.secondary,
- highlightColor:
- widget.downColor ?? Theme.of(context).colorScheme.primary,
+ hoverColor: widget.hoverColor ?? Colors.transparent,
+ highlightColor: widget.highlightColor ?? Colors.transparent,
focusColor: widget.focusColor ?? Colors.grey.withOpacity(0.35),
constraints: BoxConstraints(
minHeight: widget.minHeight ?? 0, minWidth: widget.minWidth ?? 0),
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart
index 1f7491f133..e67a7a15df 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart
@@ -42,7 +42,6 @@ class PrimaryButton extends StatelessWidget {
contentPadding: EdgeInsets.zero,
bgColor: Theme.of(context).colorScheme.primary,
hoverColor: Theme.of(context).colorScheme.primaryContainer,
- downColor: Theme.of(context).colorScheme.primary,
borderRadius: bigMode ? Corners.s12Border : Corners.s8Border,
onPressed: onPressed,
child: child,
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart
index 8caa135463..eae3c58a2a 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart
@@ -42,8 +42,6 @@ class SecondaryButton extends StatelessWidget {
minHeight: bigMode ? 40 : 38,
contentPadding: EdgeInsets.zero,
bgColor: Theme.of(context).colorScheme.surface,
- hoverColor: Theme.of(context).colorScheme.secondary,
- downColor: Theme.of(context).colorScheme.primary,
outlineColor: Theme.of(context).colorScheme.primary,
borderRadius: bigMode ? Corners.s12Border : Corners.s8Border,
onPressed: onPressed,