yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-12-03 10:41:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add shadow tokens (#7726)

Browse Source
This commit is contained in:
Richard Shiue 2025-04-11 11:14:28 +08:00
parent d8401e09c9
commit 068f93c258
6 changed files with 60 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
View File

@ -445,7 +445,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage>
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(appTheme.borderRadius.l),
color: appTheme.surfaceColorScheme.primary,
boxShadow: [appTheme.shadow.small],
boxShadow: appTheme.shadow.small,
),
toolbarBuilder: (_, child, onDismiss, isMetricsChanged) =>
BlocProvider.value(

2
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_create_menu.dart
View File

@ -315,6 +315,6 @@ ShapeDecoration buildToolbarLinkDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radius),
),
shadows: [theme.shadow.small],
shadows: theme.shadow.small,
);
}

2
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/link_preview/paste_as/paste_as_menu.dart
View File

@ -148,7 +148,7 @@ class _PasteAsMenuState extends State<PasteAsMenu> {
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: theme.surfaceColorScheme.primary,
boxShadow: [theme.shadow.medium],
boxShadow: theme.shadow.medium,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,

68
frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/builder.dart
View File

@ -93,35 +93,6 @@ class AppFlowyThemeBuilder {
};
}
AppFlowyShadow buildShadow(Brightness brightness) {
return switch (brightness) {
Brightness.light => AppFlowyShadow(
small: const BoxShadow(
offset: Offset(0.0, 2.0),
blurRadius: 16.0,
color: Color(0x1F000000),
),
medium: const BoxShadow(
offset: Offset(0.0, 4.0),
blurRadius: 32.0,
color: Color(0x1F000000),
),
),
Brightness.dark => AppFlowyShadow(
small: BoxShadow(
offset: Offset(0.0, 2.0),
blurRadius: 16.0,
color: Color(0x7A000000),
),
medium: BoxShadow(
offset: Offset(0.0, 4.0),
blurRadius: 32.0,
color: Color(0x7A000000),
),
),
};
}
AppFlowyBorderColorScheme buildBorderColorScheme(
AppFlowyBaseColorScheme colorScheme,
Brightness brightness,
@ -351,4 +322,43 @@ class AppFlowyThemeBuilder {
xxl: AppFlowySpacingConstant.spacing600,
);
}
AppFlowyShadow buildShadow(
Brightness brightness,
) {
return switch (brightness) {
Brightness.light => AppFlowyShadow(
small: [
BoxShadow(
offset: Offset(0, 2),
blurRadius: 16,
color: Color(0x1F000000),
),
],
medium: [
BoxShadow(
offset: Offset(0, 4),
blurRadius: 32,
color: Color(0x1F000000),
),
],
),
Brightness.dark => AppFlowyShadow(
small: [
BoxShadow(
offset: Offset(0, 2),
blurRadius: 16,
color: Color(0x7A000000),
),
],
medium: [
BoxShadow(
offset: Offset(0, 4),
blurRadius: 32,
color: Color(0x7A000000),
),
],
),
};
}
}

22
frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/data.dart
View File

@ -36,9 +36,9 @@ abstract class AppFlowyBaseTheme {
AppFlowySpacing get spacing;
AppFlowyBrandColorScheme get brandColorScheme;
AppFlowyShadow get shadow;
AppFlowyBrandColorScheme get brandColorScheme;
}
class AppFlowyThemeData extends AppFlowyBaseTheme {
@ -70,10 +70,11 @@ class AppFlowyThemeData extends AppFlowyBaseTheme {
colorScheme,
Brightness.light,
);
final shadow = themeBuilder.buildShadow(Brightness.light);
final brandColorScheme = themeBuilder.buildBrandColorScheme(colorScheme);
final borderRadius = themeBuilder.buildBorderRadius(colorScheme);
final spacing = themeBuilder.buildSpacing(colorScheme);
final shadow = themeBuilder.buildShadow(Brightness.light);
return AppFlowyThemeData(
colorScheme: colorScheme,
textColorScheme: textColorScheme,
@ -85,8 +86,8 @@ class AppFlowyThemeData extends AppFlowyBaseTheme {
surfaceColorScheme: surfaceColorScheme,
borderRadius: borderRadius,
spacing: spacing,
brandColorScheme: brandColorScheme,
shadow: shadow,
brandColorScheme: brandColorScheme,
);
}
@ -117,10 +118,11 @@ class AppFlowyThemeData extends AppFlowyBaseTheme {
colorScheme,
Brightness.dark,
);
final shadow = themeBuilder.buildShadow(Brightness.dark);
final brandColorScheme = themeBuilder.buildBrandColorScheme(colorScheme);
final borderRadius = themeBuilder.buildBorderRadius(colorScheme);
final spacing = themeBuilder.buildSpacing(colorScheme);
final shadow = themeBuilder.buildShadow(Brightness.dark);
return AppFlowyThemeData(
colorScheme: colorScheme,
textColorScheme: textColorScheme,
@ -132,8 +134,8 @@ class AppFlowyThemeData extends AppFlowyBaseTheme {
surfaceColorScheme: surfaceColorScheme,
borderRadius: borderRadius,
spacing: spacing,
brandColorScheme: brandColorScheme,
shadow: shadow,
brandColorScheme: brandColorScheme,
);
}
@ -146,10 +148,10 @@ class AppFlowyThemeData extends AppFlowyBaseTheme {
required this.surfaceColorScheme,
required this.borderRadius,
required this.spacing,
required this.shadow,
required this.brandColorScheme,
required this.iconColorTheme,
required this.backgroundColorScheme,
required this.shadow,
this.brightness = Brightness.light,
});
@ -181,6 +183,9 @@ class AppFlowyThemeData extends AppFlowyBaseTheme {
@override
final AppFlowySpacing spacing;
@override
final AppFlowyShadow shadow;
@override
final AppFlowyBrandColorScheme brandColorScheme;
@ -190,9 +195,6 @@ class AppFlowyThemeData extends AppFlowyBaseTheme {
@override
final AppFlowyBackgroundColorScheme backgroundColorScheme;
@override
final AppFlowyShadow shadow;
static AppFlowyTextColorScheme buildTextColorScheme(
AppFlowyBaseColorScheme colorScheme,
Brightness brightness,

9
frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/shadow/shadow.dart
View File

@ -1,8 +1,11 @@
import 'package:flutter/widgets.dart';
class AppFlowyShadow {
AppFlowyShadow({required this.small, required this.medium});
AppFlowyShadow({
required this.small,
required this.medium,
});
final BoxShadow small;
final BoxShadow medium;
final List<BoxShadow> small;
final List<BoxShadow> medium;
}