mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2025-04-19 12:24:53 -04:00
feat: implement appflowy theme lerping
This commit is contained in:
Richard Shiue
parent
fd5fec10a2
commit
99e18cef5b
16 changed files with 596 additions and 458 deletions
|
|
@ -19,7 +19,6 @@ import 'package:appflowy/workspace/application/view/view_ext.dart';
|
|||
import 'package:appflowy/workspace/presentation/command_palette/command_palette.dart';
|
||||
import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
|
||||
import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
|
||||
import 'package:appflowy_ui/appflowy_ui.dart';
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flowy_infra/theme.dart';
|
||||
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
|
||||
|
|
@ -234,25 +233,20 @@ class _ApplicationWidgetState extends State<ApplicationWidget> {
|
|||
supportedLocales: context.supportedLocales,
|
||||
locale: state.locale,
|
||||
routerConfig: routerConfig,
|
||||
builder: (context, child) => AppFlowyTheme(
|
||||
data: Theme.of(context).brightness == Brightness.light
|
||||
? AppFlowyThemeData.light()
|
||||
: AppFlowyThemeData.dark(),
|
||||
child: MediaQuery(
|
||||
// use the 1.0 as the textScaleFactor to avoid the text size
|
||||
// affected by the system setting.
|
||||
data: MediaQuery.of(context).copyWith(
|
||||
textScaler: TextScaler.linear(state.textScaleFactor),
|
||||
),
|
||||
child: overlayManagerBuilder(
|
||||
context,
|
||||
!UniversalPlatform.isMobile && FeatureFlag.search.isOn
|
||||
? CommandPalette(
|
||||
notifier: _commandPaletteNotifier,
|
||||
child: child,
|
||||
)
|
||||
: child,
|
||||
),
|
||||
builder: (context, child) => MediaQuery(
|
||||
// use the 1.0 as the textScaleFactor to avoid the text size
|
||||
// affected by the system setting.
|
||||
data: MediaQuery.of(context).copyWith(
|
||||
textScaler: TextScaler.linear(state.textScaleFactor),
|
||||
),
|
||||
child: overlayManagerBuilder(
|
||||
context,
|
||||
!UniversalPlatform.isMobile && FeatureFlag.search.isOn
|
||||
? CommandPalette(
|
||||
notifier: _commandPaletteNotifier,
|
||||
child: child,
|
||||
)
|
||||
: child,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
|
||||
import 'package:appflowy_ui/appflowy_ui.dart';
|
||||
import 'package:flowy_infra/size.dart';
|
||||
import 'package:flowy_infra/theme.dart';
|
||||
import 'package:flowy_infra/theme_extension.dart';
|
||||
|
|
@ -151,6 +152,9 @@ class DesktopAppearance extends BaseAppearance {
|
|||
lightIconColor: theme.lightIconColor,
|
||||
toolbarHoverColor: theme.toolbarHoverColor,
|
||||
),
|
||||
AppFlowyTheme(
|
||||
themeData: buildAppFlowyDefaultThemeDataLight(),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// ThemeData in mobile
|
||||
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart';
|
||||
import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
|
||||
import 'package:appflowy_ui/appflowy_ui.dart';
|
||||
import 'package:flowy_infra/size.dart';
|
||||
import 'package:flowy_infra/theme.dart';
|
||||
import 'package:flowy_infra/theme_extension.dart';
|
||||
|
|
@ -283,6 +284,9 @@ class MobileAppearance extends BaseAppearance {
|
|||
toolbarHoverColor: theme.toolbarHoverColor,
|
||||
),
|
||||
ToolbarColorExtension.fromBrightness(brightness),
|
||||
AppFlowyTheme(
|
||||
themeData: buildAppFlowyDefaultThemeDataLight(),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,19 +26,23 @@ class MyApp extends StatelessWidget {
|
|||
return ValueListenableBuilder(
|
||||
valueListenable: themeMode,
|
||||
builder: (context, themeMode, child) {
|
||||
final themeData =
|
||||
ThemeData themeData =
|
||||
themeMode == ThemeMode.light ? ThemeData.light() : ThemeData.dark();
|
||||
return AppFlowyTheme(
|
||||
data: themeMode == ThemeMode.light
|
||||
? AppFlowyThemeData.light()
|
||||
: AppFlowyThemeData.dark(),
|
||||
child: MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
title: 'AppFlowy UI Example',
|
||||
theme: themeData.copyWith(visualDensity: VisualDensity.standard),
|
||||
home: const MyHomePage(
|
||||
title: 'AppFlowy UI',
|
||||
themeData = themeData.copyWith(
|
||||
extensions: [
|
||||
AppFlowyTheme(
|
||||
themeData: themeMode == ThemeMode.light
|
||||
? buildAppFlowyDefaultThemeDataLight()
|
||||
: buildAppFlowyDefaultThemeDataDark(),
|
||||
),
|
||||
],
|
||||
);
|
||||
return MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
title: 'AppFlowy UI Example',
|
||||
theme: themeData.copyWith(visualDensity: VisualDensity.standard),
|
||||
home: const MyHomePage(
|
||||
title: 'AppFlowy UI',
|
||||
),
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,71 +1,36 @@
|
|||
import 'package:appflowy_ui/src/theme/definition/base_theme.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
import 'package:appflowy_ui/src/theme/theme.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AppFlowyTheme extends StatelessWidget {
|
||||
const AppFlowyTheme({
|
||||
super.key,
|
||||
required this.data,
|
||||
required this.child,
|
||||
});
|
||||
class AppFlowyTheme extends ThemeExtension<AppFlowyTheme> {
|
||||
const AppFlowyTheme({required this.themeData});
|
||||
|
||||
final AppFlowyBaseThemeData data;
|
||||
final Widget child;
|
||||
static AppFlowyBaseThemeData of(BuildContext context) =>
|
||||
Theme.of(context).extension<AppFlowyTheme>()!.themeData;
|
||||
|
||||
static AppFlowyBaseThemeData of(BuildContext context, {bool listen = true}) {
|
||||
final provider = maybeOf(context, listen: listen);
|
||||
if (provider == null) {
|
||||
throw FlutterError(
|
||||
'''
|
||||
AppFlowyTheme.of() called with a context that does not contain a AppFlowyTheme.\n
|
||||
No AppFlowyTheme ancestor could be found starting from the context that was passed to AppFlowyTheme.of().
|
||||
This can happen because you do not have a AppFlowyTheme widget (which introduces a AppFlowyTheme),
|
||||
or it can happen if the context you use comes from a widget above this widget.\n
|
||||
The context used was: $context''',
|
||||
);
|
||||
}
|
||||
return provider;
|
||||
}
|
||||
static AppFlowyBaseThemeData? maybeOf(BuildContext context) =>
|
||||
Theme.of(context).extension<AppFlowyTheme>()?.themeData;
|
||||
|
||||
static AppFlowyBaseThemeData? maybeOf(
|
||||
BuildContext context, {
|
||||
bool listen = true,
|
||||
final AppFlowyBaseThemeData themeData;
|
||||
|
||||
@override
|
||||
ThemeExtension<AppFlowyTheme> copyWith({
|
||||
AppFlowyBaseThemeData? themeData,
|
||||
}) {
|
||||
if (listen) {
|
||||
return context
|
||||
.dependOnInheritedWidgetOfExactType<AppFlowyInheritedTheme>()
|
||||
?.theme;
|
||||
}
|
||||
final provider = context
|
||||
.getElementForInheritedWidgetOfExactType<AppFlowyInheritedTheme>()
|
||||
?.widget;
|
||||
|
||||
return (provider as AppFlowyInheritedTheme?)?.theme;
|
||||
return AppFlowyTheme(
|
||||
themeData: themeData ?? this.themeData,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AppFlowyInheritedTheme(
|
||||
theme: data,
|
||||
child: child,
|
||||
ThemeExtension<AppFlowyTheme> lerp(
|
||||
covariant ThemeExtension<AppFlowyTheme>? other,
|
||||
double t,
|
||||
) {
|
||||
if (other is! AppFlowyTheme) {
|
||||
return this;
|
||||
}
|
||||
return AppFlowyTheme(
|
||||
themeData: themeData.lerp(other.themeData, t),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class AppFlowyInheritedTheme extends InheritedTheme {
|
||||
const AppFlowyInheritedTheme({
|
||||
super.key,
|
||||
required this.theme,
|
||||
required super.child,
|
||||
});
|
||||
|
||||
final AppFlowyBaseThemeData theme;
|
||||
|
||||
@override
|
||||
Widget wrap(BuildContext context, Widget child) {
|
||||
return AppFlowyTheme(data: theme, child: child);
|
||||
}
|
||||
|
||||
@override
|
||||
bool updateShouldNotify(AppFlowyInheritedTheme oldWidget) =>
|
||||
theme != oldWidget.theme;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,363 +15,308 @@ import 'package:flutter/material.dart';
|
|||
import '../builder.dart';
|
||||
import 'primitive.dart';
|
||||
|
||||
class AppFlowyThemeData implements AppFlowyBaseThemeData {
|
||||
const AppFlowyThemeData._({
|
||||
required this.textStyle,
|
||||
required this.textColorScheme,
|
||||
required this.borderColorScheme,
|
||||
required this.fillColorScheme,
|
||||
required this.surfaceColorScheme,
|
||||
required this.borderRadius,
|
||||
required this.spacing,
|
||||
required this.shadow,
|
||||
required this.brandColorScheme,
|
||||
required this.iconColorScheme,
|
||||
required this.backgroundColorScheme,
|
||||
required this.otherColorsColorScheme,
|
||||
});
|
||||
AppFlowyBaseThemeData buildAppFlowyDefaultThemeDataLight() {
|
||||
final textStyle = AppFlowyBaseTextStyle();
|
||||
final borderRadius = AppFlowyThemeBuilder.buildBorderRadius();
|
||||
final spacing = AppFlowyThemeBuilder.buildSpacing();
|
||||
final shadow = AppFlowyThemeBuilder.buildShadow(Brightness.light);
|
||||
|
||||
factory AppFlowyThemeData.light() {
|
||||
final textStyle = AppFlowyBaseTextStyle();
|
||||
final borderRadius = themeBuilder.buildBorderRadius();
|
||||
final spacing = themeBuilder.buildSpacing();
|
||||
final shadow = themeBuilder.buildShadow(Brightness.light);
|
||||
final textColorScheme = AppFlowyTextColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral600,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral400,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral200,
|
||||
inverse: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
onFill: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
theme: AppFlowyPrimitiveTokens.blue500,
|
||||
themeHover: AppFlowyPrimitiveTokens.blue600,
|
||||
action: AppFlowyPrimitiveTokens.blue500,
|
||||
actionHover: AppFlowyPrimitiveTokens.blue600,
|
||||
info: AppFlowyPrimitiveTokens.blue500,
|
||||
infoHover: AppFlowyPrimitiveTokens.blue600,
|
||||
success: AppFlowyPrimitiveTokens.green600,
|
||||
successHover: AppFlowyPrimitiveTokens.green700,
|
||||
warning: AppFlowyPrimitiveTokens.orange600,
|
||||
warningHover: AppFlowyPrimitiveTokens.orange700,
|
||||
error: AppFlowyPrimitiveTokens.red600,
|
||||
errorHover: AppFlowyPrimitiveTokens.red700,
|
||||
purple: AppFlowyPrimitiveTokens.purple500,
|
||||
purpleHover: AppFlowyPrimitiveTokens.purple600,
|
||||
);
|
||||
|
||||
final textColorScheme = AppFlowyTextColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral600,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral400,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral200,
|
||||
inverse: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
onFill: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
theme: AppFlowyPrimitiveTokens.blue500,
|
||||
themeHover: AppFlowyPrimitiveTokens.blue600,
|
||||
action: AppFlowyPrimitiveTokens.blue500,
|
||||
actionHover: AppFlowyPrimitiveTokens.blue600,
|
||||
info: AppFlowyPrimitiveTokens.blue500,
|
||||
infoHover: AppFlowyPrimitiveTokens.blue600,
|
||||
success: AppFlowyPrimitiveTokens.green600,
|
||||
successHover: AppFlowyPrimitiveTokens.green700,
|
||||
warning: AppFlowyPrimitiveTokens.orange600,
|
||||
warningHover: AppFlowyPrimitiveTokens.orange700,
|
||||
error: AppFlowyPrimitiveTokens.red600,
|
||||
errorHover: AppFlowyPrimitiveTokens.red700,
|
||||
purple: AppFlowyPrimitiveTokens.purple500,
|
||||
purpleHover: AppFlowyPrimitiveTokens.purple600,
|
||||
);
|
||||
final iconColorScheme = AppFlowyIconColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral600,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral400,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral200,
|
||||
white: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
purpleThick: AppFlowyPrimitiveTokens.purple500,
|
||||
purpleThickHover: AppFlowyPrimitiveTokens.purple600,
|
||||
);
|
||||
|
||||
final iconColorScheme = AppFlowyIconColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral600,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral400,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral200,
|
||||
white: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
purpleThick: AppFlowyPrimitiveTokens.purple500,
|
||||
purpleThickHover: AppFlowyPrimitiveTokens.purple600,
|
||||
);
|
||||
final borderColorScheme = AppFlowyBorderColorScheme(
|
||||
greyPrimary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
greyPrimaryHover: AppFlowyPrimitiveTokens.neutral900,
|
||||
greySecondary: AppFlowyPrimitiveTokens.neutral800,
|
||||
greySecondaryHover: AppFlowyPrimitiveTokens.neutral700,
|
||||
greyTertiary: AppFlowyPrimitiveTokens.neutral300,
|
||||
greyTertiaryHover: AppFlowyPrimitiveTokens.neutral400,
|
||||
greyQuaternary: AppFlowyPrimitiveTokens.neutral100,
|
||||
greyQuaternaryHover: AppFlowyPrimitiveTokens.neutral200,
|
||||
transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
|
||||
themeThick: AppFlowyPrimitiveTokens.blue500,
|
||||
themeThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
infoThick: AppFlowyPrimitiveTokens.blue500,
|
||||
infoThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
successThick: AppFlowyPrimitiveTokens.green600,
|
||||
successThickHover: AppFlowyPrimitiveTokens.green700,
|
||||
warningThick: AppFlowyPrimitiveTokens.orange600,
|
||||
warningThickHover: AppFlowyPrimitiveTokens.orange700,
|
||||
errorThick: AppFlowyPrimitiveTokens.red600,
|
||||
errorThickHover: AppFlowyPrimitiveTokens.red700,
|
||||
purpleThick: AppFlowyPrimitiveTokens.purple500,
|
||||
purpleThickHover: AppFlowyPrimitiveTokens.purple600,
|
||||
);
|
||||
|
||||
final borderColorScheme = AppFlowyBorderColorScheme(
|
||||
greyPrimary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
greyPrimaryHover: AppFlowyPrimitiveTokens.neutral900,
|
||||
greySecondary: AppFlowyPrimitiveTokens.neutral800,
|
||||
greySecondaryHover: AppFlowyPrimitiveTokens.neutral700,
|
||||
greyTertiary: AppFlowyPrimitiveTokens.neutral300,
|
||||
greyTertiaryHover: AppFlowyPrimitiveTokens.neutral400,
|
||||
greyQuaternary: AppFlowyPrimitiveTokens.neutral100,
|
||||
greyQuaternaryHover: AppFlowyPrimitiveTokens.neutral200,
|
||||
transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
|
||||
themeThick: AppFlowyPrimitiveTokens.blue500,
|
||||
themeThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
infoThick: AppFlowyPrimitiveTokens.blue500,
|
||||
infoThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
successThick: AppFlowyPrimitiveTokens.green600,
|
||||
successThickHover: AppFlowyPrimitiveTokens.green700,
|
||||
warningThick: AppFlowyPrimitiveTokens.orange600,
|
||||
warningThickHover: AppFlowyPrimitiveTokens.orange700,
|
||||
errorThick: AppFlowyPrimitiveTokens.red600,
|
||||
errorThickHover: AppFlowyPrimitiveTokens.red700,
|
||||
purpleThick: AppFlowyPrimitiveTokens.purple500,
|
||||
purpleThickHover: AppFlowyPrimitiveTokens.purple600,
|
||||
);
|
||||
final fillColorScheme = AppFlowyFillColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
primaryHover: AppFlowyPrimitiveTokens.neutral900,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral600,
|
||||
secondaryHover: AppFlowyPrimitiveTokens.neutral500,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral300,
|
||||
tertiaryHover: AppFlowyPrimitiveTokens.neutral400,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral100,
|
||||
quaternaryHover: AppFlowyPrimitiveTokens.neutral200,
|
||||
transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
|
||||
primaryAlpha5: AppFlowyPrimitiveTokens.neutralAlphaGrey100005,
|
||||
primaryAlpha5Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100010,
|
||||
primaryAlpha80: AppFlowyPrimitiveTokens.neutralAlphaGrey100080,
|
||||
primaryAlpha80Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100070,
|
||||
white: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
whiteAlpha: AppFlowyPrimitiveTokens.neutralAlphaWhite20,
|
||||
whiteAlphaHover: AppFlowyPrimitiveTokens.neutralAlphaWhite30,
|
||||
black: AppFlowyPrimitiveTokens.neutralBlack,
|
||||
themeLight: AppFlowyPrimitiveTokens.blue100,
|
||||
themeLightHover: AppFlowyPrimitiveTokens.blue200,
|
||||
themeThick: AppFlowyPrimitiveTokens.blue500,
|
||||
themeThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
themeSelect: AppFlowyPrimitiveTokens.blueAlphaBlue50015,
|
||||
infoLight: AppFlowyPrimitiveTokens.blue100,
|
||||
infoLightHover: AppFlowyPrimitiveTokens.blue200,
|
||||
infoThick: AppFlowyPrimitiveTokens.blue500,
|
||||
infoThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
successLight: AppFlowyPrimitiveTokens.green100,
|
||||
successLightHover: AppFlowyPrimitiveTokens.green200,
|
||||
successThick: AppFlowyPrimitiveTokens.green600,
|
||||
successThickHover: AppFlowyPrimitiveTokens.green700,
|
||||
warningLight: AppFlowyPrimitiveTokens.orange100,
|
||||
warningLightHover: AppFlowyPrimitiveTokens.orange200,
|
||||
warningThick: AppFlowyPrimitiveTokens.orange600,
|
||||
warningThickHover: AppFlowyPrimitiveTokens.orange700,
|
||||
errorLight: AppFlowyPrimitiveTokens.red100,
|
||||
errorLightHover: AppFlowyPrimitiveTokens.red200,
|
||||
errorThick: AppFlowyPrimitiveTokens.red600,
|
||||
errorThickHover: AppFlowyPrimitiveTokens.red700,
|
||||
errorSelect: AppFlowyPrimitiveTokens.redAlphaRed50010,
|
||||
purpleLight: AppFlowyPrimitiveTokens.purple100,
|
||||
purpleLightHover: AppFlowyPrimitiveTokens.purple200,
|
||||
purpleThickHover: AppFlowyPrimitiveTokens.purple600,
|
||||
purpleThick: AppFlowyPrimitiveTokens.purple500,
|
||||
);
|
||||
|
||||
final fillColorScheme = AppFlowyFillColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
primaryHover: AppFlowyPrimitiveTokens.neutral900,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral600,
|
||||
secondaryHover: AppFlowyPrimitiveTokens.neutral500,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral300,
|
||||
tertiaryHover: AppFlowyPrimitiveTokens.neutral400,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral100,
|
||||
quaternaryHover: AppFlowyPrimitiveTokens.neutral200,
|
||||
transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
|
||||
primaryAlpha5: AppFlowyPrimitiveTokens.neutralAlphaGrey100005,
|
||||
primaryAlpha5Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100010,
|
||||
primaryAlpha80: AppFlowyPrimitiveTokens.neutralAlphaGrey100080,
|
||||
primaryAlpha80Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100070,
|
||||
white: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
whiteAlpha: AppFlowyPrimitiveTokens.neutralAlphaWhite20,
|
||||
whiteAlphaHover: AppFlowyPrimitiveTokens.neutralAlphaWhite30,
|
||||
black: AppFlowyPrimitiveTokens.neutralBlack,
|
||||
themeLight: AppFlowyPrimitiveTokens.blue100,
|
||||
themeLightHover: AppFlowyPrimitiveTokens.blue200,
|
||||
themeThick: AppFlowyPrimitiveTokens.blue500,
|
||||
themeThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
themeSelect: AppFlowyPrimitiveTokens.blueAlphaBlue50015,
|
||||
infoLight: AppFlowyPrimitiveTokens.blue100,
|
||||
infoLightHover: AppFlowyPrimitiveTokens.blue200,
|
||||
infoThick: AppFlowyPrimitiveTokens.blue500,
|
||||
infoThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
successLight: AppFlowyPrimitiveTokens.green100,
|
||||
successLightHover: AppFlowyPrimitiveTokens.green200,
|
||||
successThick: AppFlowyPrimitiveTokens.green600,
|
||||
successThickHover: AppFlowyPrimitiveTokens.green700,
|
||||
warningLight: AppFlowyPrimitiveTokens.orange100,
|
||||
warningLightHover: AppFlowyPrimitiveTokens.orange200,
|
||||
warningThick: AppFlowyPrimitiveTokens.orange600,
|
||||
warningThickHover: AppFlowyPrimitiveTokens.orange700,
|
||||
errorLight: AppFlowyPrimitiveTokens.red100,
|
||||
errorLightHover: AppFlowyPrimitiveTokens.red200,
|
||||
errorThick: AppFlowyPrimitiveTokens.red600,
|
||||
errorThickHover: AppFlowyPrimitiveTokens.red700,
|
||||
errorSelect: AppFlowyPrimitiveTokens.redAlphaRed50010,
|
||||
purpleLight: AppFlowyPrimitiveTokens.purple100,
|
||||
purpleLightHover: AppFlowyPrimitiveTokens.purple200,
|
||||
purpleThickHover: AppFlowyPrimitiveTokens.purple600,
|
||||
purpleThick: AppFlowyPrimitiveTokens.purple500,
|
||||
);
|
||||
final surfaceColorScheme = AppFlowySurfaceColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
overlay: AppFlowyPrimitiveTokens.neutralAlphaBlack60,
|
||||
);
|
||||
|
||||
final surfaceColorScheme = AppFlowySurfaceColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
overlay: AppFlowyPrimitiveTokens.neutralAlphaBlack60,
|
||||
);
|
||||
final backgroundColorScheme = AppFlowyBackgroundColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral100,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral200,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral300,
|
||||
);
|
||||
|
||||
final backgroundColorScheme = AppFlowyBackgroundColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral100,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral200,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral300,
|
||||
);
|
||||
final brandColorScheme = AppFlowyBrandColorScheme(
|
||||
skyline: Color(0xFF00B5FF),
|
||||
aqua: Color(0xFF00C8FF),
|
||||
violet: Color(0xFF9327FF),
|
||||
amethyst: Color(0xFF8427E0),
|
||||
berry: Color(0xFFE3006D),
|
||||
coral: Color(0xFFFB006D),
|
||||
golden: Color(0xFFF7931E),
|
||||
amber: Color(0xFFFFBD00),
|
||||
lemon: Color(0xFFFFCE00),
|
||||
);
|
||||
|
||||
final brandColorScheme = AppFlowyBrandColorScheme(
|
||||
skyline: Color(0xFF00B5FF),
|
||||
aqua: Color(0xFF00C8FF),
|
||||
violet: Color(0xFF9327FF),
|
||||
amethyst: Color(0xFF8427E0),
|
||||
berry: Color(0xFFE3006D),
|
||||
coral: Color(0xFFFB006D),
|
||||
golden: Color(0xFFF7931E),
|
||||
amber: Color(0xFFFFBD00),
|
||||
lemon: Color(0xFFFFCE00),
|
||||
);
|
||||
final otherColorsColorScheme = AppFlowyOtherColorsColorScheme(
|
||||
textHighlight: AppFlowyPrimitiveTokens.blue200,
|
||||
);
|
||||
|
||||
final otherColorsColorScheme = AppFlowyOtherColorsColorScheme(
|
||||
textHighlight: AppFlowyPrimitiveTokens.blue200,
|
||||
);
|
||||
|
||||
return AppFlowyThemeData._(
|
||||
textStyle: textStyle,
|
||||
textColorScheme: textColorScheme,
|
||||
borderColorScheme: borderColorScheme,
|
||||
fillColorScheme: fillColorScheme,
|
||||
surfaceColorScheme: surfaceColorScheme,
|
||||
backgroundColorScheme: backgroundColorScheme,
|
||||
iconColorScheme: iconColorScheme,
|
||||
brandColorScheme: brandColorScheme,
|
||||
otherColorsColorScheme: otherColorsColorScheme,
|
||||
borderRadius: borderRadius,
|
||||
spacing: spacing,
|
||||
shadow: shadow,
|
||||
);
|
||||
}
|
||||
|
||||
factory AppFlowyThemeData.dark() {
|
||||
final textStyle = AppFlowyBaseTextStyle();
|
||||
final borderRadius = themeBuilder.buildBorderRadius();
|
||||
final spacing = themeBuilder.buildSpacing();
|
||||
final shadow = themeBuilder.buildShadow(Brightness.dark);
|
||||
|
||||
final textColorScheme = AppFlowyTextColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral200,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral400,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral600,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
inverse: AppFlowyPrimitiveTokens.neutral1000,
|
||||
onFill: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
theme: AppFlowyPrimitiveTokens.blue500,
|
||||
themeHover: AppFlowyPrimitiveTokens.blue600,
|
||||
action: AppFlowyPrimitiveTokens.blue500,
|
||||
actionHover: AppFlowyPrimitiveTokens.blue600,
|
||||
info: AppFlowyPrimitiveTokens.blue500,
|
||||
infoHover: AppFlowyPrimitiveTokens.blue600,
|
||||
success: AppFlowyPrimitiveTokens.green600,
|
||||
successHover: AppFlowyPrimitiveTokens.green700,
|
||||
warning: AppFlowyPrimitiveTokens.orange600,
|
||||
warningHover: AppFlowyPrimitiveTokens.orange700,
|
||||
error: AppFlowyPrimitiveTokens.red500,
|
||||
errorHover: AppFlowyPrimitiveTokens.red400,
|
||||
purple: AppFlowyPrimitiveTokens.purple500,
|
||||
purpleHover: AppFlowyPrimitiveTokens.purple600,
|
||||
);
|
||||
|
||||
final iconColorScheme = AppFlowyIconColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral200,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral400,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral600,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
white: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
purpleThick: Color(0xFFFFFFFF),
|
||||
purpleThickHover: Color(0xFFFFFFFF),
|
||||
);
|
||||
|
||||
final borderColorScheme = AppFlowyBorderColorScheme(
|
||||
greyPrimary: AppFlowyPrimitiveTokens.neutral100,
|
||||
greyPrimaryHover: AppFlowyPrimitiveTokens.neutral200,
|
||||
greySecondary: AppFlowyPrimitiveTokens.neutral300,
|
||||
greySecondaryHover: AppFlowyPrimitiveTokens.neutral400,
|
||||
greyTertiary: AppFlowyPrimitiveTokens.neutral800,
|
||||
greyTertiaryHover: AppFlowyPrimitiveTokens.neutral700,
|
||||
greyQuaternary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
greyQuaternaryHover: AppFlowyPrimitiveTokens.neutral900,
|
||||
transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
|
||||
themeThick: AppFlowyPrimitiveTokens.blue500,
|
||||
themeThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
infoThick: AppFlowyPrimitiveTokens.blue500,
|
||||
infoThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
successThick: AppFlowyPrimitiveTokens.green600,
|
||||
successThickHover: AppFlowyPrimitiveTokens.green700,
|
||||
warningThick: AppFlowyPrimitiveTokens.orange600,
|
||||
warningThickHover: AppFlowyPrimitiveTokens.orange700,
|
||||
errorThick: AppFlowyPrimitiveTokens.red500,
|
||||
errorThickHover: AppFlowyPrimitiveTokens.red400,
|
||||
purpleThick: AppFlowyPrimitiveTokens.purple500,
|
||||
purpleThickHover: AppFlowyPrimitiveTokens.purple600,
|
||||
);
|
||||
|
||||
final fillColorScheme = AppFlowyFillColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral100,
|
||||
primaryHover: AppFlowyPrimitiveTokens.neutral200,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral300,
|
||||
secondaryHover: AppFlowyPrimitiveTokens.neutral400,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral600,
|
||||
tertiaryHover: AppFlowyPrimitiveTokens.neutral500,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
quaternaryHover: AppFlowyPrimitiveTokens.neutral900,
|
||||
transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
|
||||
primaryAlpha5: AppFlowyPrimitiveTokens.neutralAlphaGrey10005,
|
||||
primaryAlpha5Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey10010,
|
||||
primaryAlpha80: AppFlowyPrimitiveTokens.neutralAlphaGrey100080,
|
||||
primaryAlpha80Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100070,
|
||||
white: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
whiteAlpha: AppFlowyPrimitiveTokens.neutralAlphaWhite20,
|
||||
whiteAlphaHover: AppFlowyPrimitiveTokens.neutralAlphaWhite30,
|
||||
black: AppFlowyPrimitiveTokens.neutralBlack,
|
||||
themeLight: AppFlowyPrimitiveTokens.blue100,
|
||||
themeLightHover: AppFlowyPrimitiveTokens.blue200,
|
||||
themeThick: AppFlowyPrimitiveTokens.blue500,
|
||||
themeThickHover: AppFlowyPrimitiveTokens.blue400,
|
||||
themeSelect: AppFlowyPrimitiveTokens.blueAlphaBlue50015,
|
||||
infoLight: AppFlowyPrimitiveTokens.blue100,
|
||||
infoLightHover: AppFlowyPrimitiveTokens.blue200,
|
||||
infoThick: AppFlowyPrimitiveTokens.blue500,
|
||||
infoThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
successLight: AppFlowyPrimitiveTokens.green100,
|
||||
successLightHover: AppFlowyPrimitiveTokens.green200,
|
||||
successThick: AppFlowyPrimitiveTokens.green600,
|
||||
successThickHover: AppFlowyPrimitiveTokens.green700,
|
||||
warningLight: AppFlowyPrimitiveTokens.orange100,
|
||||
warningLightHover: AppFlowyPrimitiveTokens.orange200,
|
||||
warningThick: AppFlowyPrimitiveTokens.orange600,
|
||||
warningThickHover: AppFlowyPrimitiveTokens.orange700,
|
||||
errorLight: AppFlowyPrimitiveTokens.red100,
|
||||
errorLightHover: AppFlowyPrimitiveTokens.red200,
|
||||
errorThick: AppFlowyPrimitiveTokens.red600,
|
||||
errorThickHover: AppFlowyPrimitiveTokens.red500,
|
||||
errorSelect: AppFlowyPrimitiveTokens.redAlphaRed50010,
|
||||
purpleLight: AppFlowyPrimitiveTokens.purple100,
|
||||
purpleLightHover: AppFlowyPrimitiveTokens.purple200,
|
||||
purpleThickHover: AppFlowyPrimitiveTokens.purple600,
|
||||
purpleThick: AppFlowyPrimitiveTokens.purple500,
|
||||
);
|
||||
|
||||
final surfaceColorScheme = AppFlowySurfaceColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral900,
|
||||
overlay: AppFlowyPrimitiveTokens.neutralAlphaBlack60,
|
||||
);
|
||||
|
||||
final backgroundColorScheme = AppFlowyBackgroundColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral900,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral800,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral700,
|
||||
);
|
||||
|
||||
final brandColorScheme = AppFlowyBrandColorScheme(
|
||||
skyline: Color(0xFF00B5FF),
|
||||
aqua: Color(0xFF00C8FF),
|
||||
violet: Color(0xFF9327FF),
|
||||
amethyst: Color(0xFF8427E0),
|
||||
berry: Color(0xFFE3006D),
|
||||
coral: Color(0xFFFB006D),
|
||||
golden: Color(0xFFF7931E),
|
||||
amber: Color(0xFFFFBD00),
|
||||
lemon: Color(0xFFFFCE00),
|
||||
);
|
||||
|
||||
final otherColorsColorScheme = AppFlowyOtherColorsColorScheme(
|
||||
textHighlight: AppFlowyPrimitiveTokens.blue200,
|
||||
);
|
||||
|
||||
return AppFlowyThemeData._(
|
||||
textStyle: textStyle,
|
||||
textColorScheme: textColorScheme,
|
||||
borderColorScheme: borderColorScheme,
|
||||
fillColorScheme: fillColorScheme,
|
||||
surfaceColorScheme: surfaceColorScheme,
|
||||
backgroundColorScheme: backgroundColorScheme,
|
||||
iconColorScheme: iconColorScheme,
|
||||
brandColorScheme: brandColorScheme,
|
||||
otherColorsColorScheme: otherColorsColorScheme,
|
||||
borderRadius: borderRadius,
|
||||
spacing: spacing,
|
||||
shadow: shadow,
|
||||
);
|
||||
}
|
||||
|
||||
static const AppFlowyThemeBuilder themeBuilder = AppFlowyThemeBuilder();
|
||||
|
||||
@override
|
||||
final AppFlowyBaseTextStyle textStyle;
|
||||
|
||||
@override
|
||||
final AppFlowyTextColorScheme textColorScheme;
|
||||
|
||||
@override
|
||||
final AppFlowyBorderColorScheme borderColorScheme;
|
||||
|
||||
@override
|
||||
final AppFlowyFillColorScheme fillColorScheme;
|
||||
|
||||
@override
|
||||
final AppFlowySurfaceColorScheme surfaceColorScheme;
|
||||
|
||||
@override
|
||||
final AppFlowyBorderRadius borderRadius;
|
||||
|
||||
@override
|
||||
final AppFlowySpacing spacing;
|
||||
|
||||
@override
|
||||
final AppFlowyShadow shadow;
|
||||
|
||||
@override
|
||||
final AppFlowyBrandColorScheme brandColorScheme;
|
||||
|
||||
@override
|
||||
final AppFlowyIconColorScheme iconColorScheme;
|
||||
|
||||
@override
|
||||
final AppFlowyBackgroundColorScheme backgroundColorScheme;
|
||||
|
||||
@override
|
||||
final AppFlowyOtherColorsColorScheme otherColorsColorScheme;
|
||||
return AppFlowyBaseThemeData(
|
||||
textStyle: textStyle,
|
||||
textColorScheme: textColorScheme,
|
||||
borderColorScheme: borderColorScheme,
|
||||
fillColorScheme: fillColorScheme,
|
||||
surfaceColorScheme: surfaceColorScheme,
|
||||
backgroundColorScheme: backgroundColorScheme,
|
||||
iconColorScheme: iconColorScheme,
|
||||
brandColorScheme: brandColorScheme,
|
||||
otherColorsColorScheme: otherColorsColorScheme,
|
||||
borderRadius: borderRadius,
|
||||
spacing: spacing,
|
||||
shadow: shadow,
|
||||
);
|
||||
}
|
||||
|
||||
AppFlowyBaseThemeData buildAppFlowyDefaultThemeDataDark() {
|
||||
final textStyle = AppFlowyBaseTextStyle();
|
||||
final borderRadius = AppFlowyThemeBuilder.buildBorderRadius();
|
||||
final spacing = AppFlowyThemeBuilder.buildSpacing();
|
||||
final shadow = AppFlowyThemeBuilder.buildShadow(Brightness.dark);
|
||||
|
||||
final textColorScheme = AppFlowyTextColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral200,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral400,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral600,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
inverse: AppFlowyPrimitiveTokens.neutral1000,
|
||||
onFill: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
theme: AppFlowyPrimitiveTokens.blue500,
|
||||
themeHover: AppFlowyPrimitiveTokens.blue600,
|
||||
action: AppFlowyPrimitiveTokens.blue500,
|
||||
actionHover: AppFlowyPrimitiveTokens.blue600,
|
||||
info: AppFlowyPrimitiveTokens.blue500,
|
||||
infoHover: AppFlowyPrimitiveTokens.blue600,
|
||||
success: AppFlowyPrimitiveTokens.green600,
|
||||
successHover: AppFlowyPrimitiveTokens.green700,
|
||||
warning: AppFlowyPrimitiveTokens.orange600,
|
||||
warningHover: AppFlowyPrimitiveTokens.orange700,
|
||||
error: AppFlowyPrimitiveTokens.red500,
|
||||
errorHover: AppFlowyPrimitiveTokens.red400,
|
||||
purple: AppFlowyPrimitiveTokens.purple500,
|
||||
purpleHover: AppFlowyPrimitiveTokens.purple600,
|
||||
);
|
||||
|
||||
final iconColorScheme = AppFlowyIconColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral200,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral400,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral600,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
white: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
purpleThick: Color(0xFFFFFFFF),
|
||||
purpleThickHover: Color(0xFFFFFFFF),
|
||||
);
|
||||
|
||||
final borderColorScheme = AppFlowyBorderColorScheme(
|
||||
greyPrimary: AppFlowyPrimitiveTokens.neutral100,
|
||||
greyPrimaryHover: AppFlowyPrimitiveTokens.neutral200,
|
||||
greySecondary: AppFlowyPrimitiveTokens.neutral300,
|
||||
greySecondaryHover: AppFlowyPrimitiveTokens.neutral400,
|
||||
greyTertiary: AppFlowyPrimitiveTokens.neutral800,
|
||||
greyTertiaryHover: AppFlowyPrimitiveTokens.neutral700,
|
||||
greyQuaternary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
greyQuaternaryHover: AppFlowyPrimitiveTokens.neutral900,
|
||||
transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
|
||||
themeThick: AppFlowyPrimitiveTokens.blue500,
|
||||
themeThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
infoThick: AppFlowyPrimitiveTokens.blue500,
|
||||
infoThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
successThick: AppFlowyPrimitiveTokens.green600,
|
||||
successThickHover: AppFlowyPrimitiveTokens.green700,
|
||||
warningThick: AppFlowyPrimitiveTokens.orange600,
|
||||
warningThickHover: AppFlowyPrimitiveTokens.orange700,
|
||||
errorThick: AppFlowyPrimitiveTokens.red500,
|
||||
errorThickHover: AppFlowyPrimitiveTokens.red400,
|
||||
purpleThick: AppFlowyPrimitiveTokens.purple500,
|
||||
purpleThickHover: AppFlowyPrimitiveTokens.purple600,
|
||||
);
|
||||
|
||||
final fillColorScheme = AppFlowyFillColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral100,
|
||||
primaryHover: AppFlowyPrimitiveTokens.neutral200,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral300,
|
||||
secondaryHover: AppFlowyPrimitiveTokens.neutral400,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral600,
|
||||
tertiaryHover: AppFlowyPrimitiveTokens.neutral500,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
quaternaryHover: AppFlowyPrimitiveTokens.neutral900,
|
||||
transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
|
||||
primaryAlpha5: AppFlowyPrimitiveTokens.neutralAlphaGrey10005,
|
||||
primaryAlpha5Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey10010,
|
||||
primaryAlpha80: AppFlowyPrimitiveTokens.neutralAlphaGrey100080,
|
||||
primaryAlpha80Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100070,
|
||||
white: AppFlowyPrimitiveTokens.neutralWhite,
|
||||
whiteAlpha: AppFlowyPrimitiveTokens.neutralAlphaWhite20,
|
||||
whiteAlphaHover: AppFlowyPrimitiveTokens.neutralAlphaWhite30,
|
||||
black: AppFlowyPrimitiveTokens.neutralBlack,
|
||||
themeLight: AppFlowyPrimitiveTokens.blue100,
|
||||
themeLightHover: AppFlowyPrimitiveTokens.blue200,
|
||||
themeThick: AppFlowyPrimitiveTokens.blue500,
|
||||
themeThickHover: AppFlowyPrimitiveTokens.blue400,
|
||||
themeSelect: AppFlowyPrimitiveTokens.blueAlphaBlue50015,
|
||||
infoLight: AppFlowyPrimitiveTokens.blue100,
|
||||
infoLightHover: AppFlowyPrimitiveTokens.blue200,
|
||||
infoThick: AppFlowyPrimitiveTokens.blue500,
|
||||
infoThickHover: AppFlowyPrimitiveTokens.blue600,
|
||||
successLight: AppFlowyPrimitiveTokens.green100,
|
||||
successLightHover: AppFlowyPrimitiveTokens.green200,
|
||||
successThick: AppFlowyPrimitiveTokens.green600,
|
||||
successThickHover: AppFlowyPrimitiveTokens.green700,
|
||||
warningLight: AppFlowyPrimitiveTokens.orange100,
|
||||
warningLightHover: AppFlowyPrimitiveTokens.orange200,
|
||||
warningThick: AppFlowyPrimitiveTokens.orange600,
|
||||
warningThickHover: AppFlowyPrimitiveTokens.orange700,
|
||||
errorLight: AppFlowyPrimitiveTokens.red100,
|
||||
errorLightHover: AppFlowyPrimitiveTokens.red200,
|
||||
errorThick: AppFlowyPrimitiveTokens.red600,
|
||||
errorThickHover: AppFlowyPrimitiveTokens.red500,
|
||||
errorSelect: AppFlowyPrimitiveTokens.redAlphaRed50010,
|
||||
purpleLight: AppFlowyPrimitiveTokens.purple100,
|
||||
purpleLightHover: AppFlowyPrimitiveTokens.purple200,
|
||||
purpleThickHover: AppFlowyPrimitiveTokens.purple600,
|
||||
purpleThick: AppFlowyPrimitiveTokens.purple500,
|
||||
);
|
||||
|
||||
final surfaceColorScheme = AppFlowySurfaceColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral900,
|
||||
overlay: AppFlowyPrimitiveTokens.neutralAlphaBlack60,
|
||||
);
|
||||
|
||||
final backgroundColorScheme = AppFlowyBackgroundColorScheme(
|
||||
primary: AppFlowyPrimitiveTokens.neutral1000,
|
||||
secondary: AppFlowyPrimitiveTokens.neutral900,
|
||||
tertiary: AppFlowyPrimitiveTokens.neutral800,
|
||||
quaternary: AppFlowyPrimitiveTokens.neutral700,
|
||||
);
|
||||
|
||||
final brandColorScheme = AppFlowyBrandColorScheme(
|
||||
skyline: Color(0xFF00B5FF),
|
||||
aqua: Color(0xFF00C8FF),
|
||||
violet: Color(0xFF9327FF),
|
||||
amethyst: Color(0xFF8427E0),
|
||||
berry: Color(0xFFE3006D),
|
||||
coral: Color(0xFFFB006D),
|
||||
golden: Color(0xFFF7931E),
|
||||
amber: Color(0xFFFFBD00),
|
||||
lemon: Color(0xFFFFCE00),
|
||||
);
|
||||
|
||||
final otherColorsColorScheme = AppFlowyOtherColorsColorScheme(
|
||||
textHighlight: AppFlowyPrimitiveTokens.blue200,
|
||||
);
|
||||
|
||||
return AppFlowyBaseThemeData(
|
||||
textStyle: textStyle,
|
||||
textColorScheme: textColorScheme,
|
||||
borderColorScheme: borderColorScheme,
|
||||
fillColorScheme: fillColorScheme,
|
||||
surfaceColorScheme: surfaceColorScheme,
|
||||
backgroundColorScheme: backgroundColorScheme,
|
||||
iconColorScheme: iconColorScheme,
|
||||
brandColorScheme: brandColorScheme,
|
||||
otherColorsColorScheme: otherColorsColorScheme,
|
||||
borderRadius: borderRadius,
|
||||
spacing: spacing,
|
||||
shadow: shadow,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ class AppFlowyBorderRadiusConstant {
|
|||
class AppFlowyThemeBuilder {
|
||||
const AppFlowyThemeBuilder();
|
||||
|
||||
AppFlowyBorderRadius buildBorderRadius() {
|
||||
static AppFlowyBorderRadius buildBorderRadius() {
|
||||
return AppFlowyBorderRadius(
|
||||
xs: AppFlowyBorderRadiusConstant.radius100,
|
||||
s: AppFlowyBorderRadiusConstant.radius200,
|
||||
|
|
@ -35,7 +35,7 @@ class AppFlowyThemeBuilder {
|
|||
);
|
||||
}
|
||||
|
||||
AppFlowySpacing buildSpacing() {
|
||||
static AppFlowySpacing buildSpacing() {
|
||||
return AppFlowySpacing(
|
||||
xs: AppFlowySpacingConstant.spacing100,
|
||||
s: AppFlowySpacingConstant.spacing200,
|
||||
|
|
@ -46,7 +46,7 @@ class AppFlowyThemeBuilder {
|
|||
);
|
||||
}
|
||||
|
||||
AppFlowyShadow buildShadow(
|
||||
static AppFlowyShadow buildShadow(
|
||||
Brightness brightness,
|
||||
) {
|
||||
return switch (brightness) {
|
||||
|
|
|
|||
|
|
@ -4,30 +4,65 @@ import 'shadow/shadow.dart';
|
|||
import 'spacing/spacing.dart';
|
||||
import 'text_style/text_style.dart';
|
||||
|
||||
abstract class AppFlowyBaseThemeData {
|
||||
const AppFlowyBaseThemeData();
|
||||
class AppFlowyBaseThemeData {
|
||||
const AppFlowyBaseThemeData({
|
||||
required this.textColorScheme,
|
||||
required this.textStyle,
|
||||
required this.iconColorScheme,
|
||||
required this.borderColorScheme,
|
||||
required this.backgroundColorScheme,
|
||||
required this.fillColorScheme,
|
||||
required this.surfaceColorScheme,
|
||||
required this.borderRadius,
|
||||
required this.spacing,
|
||||
required this.shadow,
|
||||
required this.brandColorScheme,
|
||||
required this.otherColorsColorScheme,
|
||||
});
|
||||
|
||||
AppFlowyTextColorScheme get textColorScheme;
|
||||
final AppFlowyTextColorScheme textColorScheme;
|
||||
|
||||
AppFlowyBaseTextStyle get textStyle;
|
||||
final AppFlowyBaseTextStyle textStyle;
|
||||
|
||||
AppFlowyIconColorScheme get iconColorScheme;
|
||||
final AppFlowyIconColorScheme iconColorScheme;
|
||||
|
||||
AppFlowyBorderColorScheme get borderColorScheme;
|
||||
final AppFlowyBorderColorScheme borderColorScheme;
|
||||
|
||||
AppFlowyBackgroundColorScheme get backgroundColorScheme;
|
||||
final AppFlowyBackgroundColorScheme backgroundColorScheme;
|
||||
|
||||
AppFlowyFillColorScheme get fillColorScheme;
|
||||
final AppFlowyFillColorScheme fillColorScheme;
|
||||
|
||||
AppFlowySurfaceColorScheme get surfaceColorScheme;
|
||||
final AppFlowySurfaceColorScheme surfaceColorScheme;
|
||||
|
||||
AppFlowyBorderRadius get borderRadius;
|
||||
final AppFlowyBorderRadius borderRadius;
|
||||
|
||||
AppFlowySpacing get spacing;
|
||||
final AppFlowySpacing spacing;
|
||||
|
||||
AppFlowyShadow get shadow;
|
||||
final AppFlowyShadow shadow;
|
||||
|
||||
AppFlowyBrandColorScheme get brandColorScheme;
|
||||
final AppFlowyBrandColorScheme brandColorScheme;
|
||||
|
||||
AppFlowyOtherColorsColorScheme get otherColorsColorScheme;
|
||||
final AppFlowyOtherColorsColorScheme otherColorsColorScheme;
|
||||
|
||||
AppFlowyBaseThemeData lerp(
|
||||
AppFlowyBaseThemeData other,
|
||||
double t,
|
||||
) {
|
||||
return AppFlowyBaseThemeData(
|
||||
textColorScheme: textColorScheme.lerp(other.textColorScheme, t),
|
||||
textStyle: other.textStyle,
|
||||
iconColorScheme: iconColorScheme.lerp(other.iconColorScheme, t),
|
||||
borderColorScheme: borderColorScheme.lerp(other.borderColorScheme, t),
|
||||
backgroundColorScheme:
|
||||
backgroundColorScheme.lerp(other.backgroundColorScheme, t),
|
||||
fillColorScheme: fillColorScheme.lerp(other.fillColorScheme, t),
|
||||
surfaceColorScheme: surfaceColorScheme.lerp(other.surfaceColorScheme, t),
|
||||
borderRadius: other.borderRadius,
|
||||
spacing: other.spacing,
|
||||
shadow: other.shadow,
|
||||
brandColorScheme: brandColorScheme.lerp(other.brandColorScheme, t),
|
||||
otherColorsColorScheme:
|
||||
otherColorsColorScheme.lerp(other.otherColorsColorScheme, t),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,4 +12,16 @@ class AppFlowyBackgroundColorScheme {
|
|||
final Color secondary;
|
||||
final Color tertiary;
|
||||
final Color quaternary;
|
||||
|
||||
AppFlowyBackgroundColorScheme lerp(
|
||||
AppFlowyBackgroundColorScheme other,
|
||||
double t,
|
||||
) {
|
||||
return AppFlowyBackgroundColorScheme(
|
||||
primary: Color.lerp(primary, other.primary, t)!,
|
||||
secondary: Color.lerp(secondary, other.secondary, t)!,
|
||||
tertiary: Color.lerp(tertiary, other.tertiary, t)!,
|
||||
quaternary: Color.lerp(quaternary, other.quaternary, t)!,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,4 +46,40 @@ class AppFlowyBorderColorScheme {
|
|||
final Color errorThickHover;
|
||||
final Color purpleThick;
|
||||
final Color purpleThickHover;
|
||||
|
||||
AppFlowyBorderColorScheme lerp(
|
||||
AppFlowyBorderColorScheme other,
|
||||
double t,
|
||||
) {
|
||||
return AppFlowyBorderColorScheme(
|
||||
greyPrimary: Color.lerp(greyPrimary, other.greyPrimary, t)!,
|
||||
greyPrimaryHover:
|
||||
Color.lerp(greyPrimaryHover, other.greyPrimaryHover, t)!,
|
||||
greySecondary: Color.lerp(greySecondary, other.greySecondary, t)!,
|
||||
greySecondaryHover:
|
||||
Color.lerp(greySecondaryHover, other.greySecondaryHover, t)!,
|
||||
greyTertiary: Color.lerp(greyTertiary, other.greyTertiary, t)!,
|
||||
greyTertiaryHover:
|
||||
Color.lerp(greyTertiaryHover, other.greyTertiaryHover, t)!,
|
||||
greyQuaternary: Color.lerp(greyQuaternary, other.greyQuaternary, t)!,
|
||||
greyQuaternaryHover:
|
||||
Color.lerp(greyQuaternaryHover, other.greyQuaternaryHover, t)!,
|
||||
transparent: Color.lerp(transparent, other.transparent, t)!,
|
||||
themeThick: Color.lerp(themeThick, other.themeThick, t)!,
|
||||
themeThickHover: Color.lerp(themeThickHover, other.themeThickHover, t)!,
|
||||
infoThick: Color.lerp(infoThick, other.infoThick, t)!,
|
||||
infoThickHover: Color.lerp(infoThickHover, other.infoThickHover, t)!,
|
||||
successThick: Color.lerp(successThick, other.successThick, t)!,
|
||||
successThickHover:
|
||||
Color.lerp(successThickHover, other.successThickHover, t)!,
|
||||
warningThick: Color.lerp(warningThick, other.warningThick, t)!,
|
||||
warningThickHover:
|
||||
Color.lerp(warningThickHover, other.warningThickHover, t)!,
|
||||
errorThick: Color.lerp(errorThick, other.errorThick, t)!,
|
||||
errorThickHover: Color.lerp(errorThickHover, other.errorThickHover, t)!,
|
||||
purpleThick: Color.lerp(purpleThick, other.purpleThick, t)!,
|
||||
purpleThickHover:
|
||||
Color.lerp(purpleThickHover, other.purpleThickHover, t)!,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,4 +22,21 @@ class AppFlowyBrandColorScheme {
|
|||
final Color golden;
|
||||
final Color amber;
|
||||
final Color lemon;
|
||||
|
||||
AppFlowyBrandColorScheme lerp(
|
||||
AppFlowyBrandColorScheme other,
|
||||
double t,
|
||||
) {
|
||||
return AppFlowyBrandColorScheme(
|
||||
skyline: Color.lerp(skyline, other.skyline, t)!,
|
||||
aqua: Color.lerp(aqua, other.aqua, t)!,
|
||||
violet: Color.lerp(violet, other.violet, t)!,
|
||||
amethyst: Color.lerp(amethyst, other.amethyst, t)!,
|
||||
berry: Color.lerp(berry, other.berry, t)!,
|
||||
coral: Color.lerp(coral, other.coral, t)!,
|
||||
golden: Color.lerp(golden, other.golden, t)!,
|
||||
amber: Color.lerp(amber, other.amber, t)!,
|
||||
lemon: Color.lerp(lemon, other.lemon, t)!,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,4 +90,63 @@ class AppFlowyFillColorScheme {
|
|||
final Color purpleLightHover;
|
||||
final Color purpleThick;
|
||||
final Color purpleThickHover;
|
||||
|
||||
AppFlowyFillColorScheme lerp(
|
||||
AppFlowyFillColorScheme other,
|
||||
double t,
|
||||
) {
|
||||
return AppFlowyFillColorScheme(
|
||||
primary: Color.lerp(primary, other.primary, t)!,
|
||||
primaryHover: Color.lerp(primaryHover, other.primaryHover, t)!,
|
||||
secondary: Color.lerp(secondary, other.secondary, t)!,
|
||||
secondaryHover: Color.lerp(secondaryHover, other.secondaryHover, t)!,
|
||||
tertiary: Color.lerp(tertiary, other.tertiary, t)!,
|
||||
tertiaryHover: Color.lerp(tertiaryHover, other.tertiaryHover, t)!,
|
||||
quaternary: Color.lerp(quaternary, other.quaternary, t)!,
|
||||
quaternaryHover: Color.lerp(quaternaryHover, other.quaternaryHover, t)!,
|
||||
transparent: Color.lerp(transparent, other.transparent, t)!,
|
||||
primaryAlpha5: Color.lerp(primaryAlpha5, other.primaryAlpha5, t)!,
|
||||
primaryAlpha5Hover:
|
||||
Color.lerp(primaryAlpha5Hover, other.primaryAlpha5Hover, t)!,
|
||||
primaryAlpha80: Color.lerp(primaryAlpha80, other.primaryAlpha80, t)!,
|
||||
primaryAlpha80Hover:
|
||||
Color.lerp(primaryAlpha80Hover, other.primaryAlpha80Hover, t)!,
|
||||
white: Color.lerp(white, other.white, t)!,
|
||||
whiteAlpha: Color.lerp(whiteAlpha, other.whiteAlpha, t)!,
|
||||
whiteAlphaHover: Color.lerp(whiteAlphaHover, other.whiteAlphaHover, t)!,
|
||||
black: Color.lerp(black, other.black, t)!,
|
||||
themeLight: Color.lerp(themeLight, other.themeLight, t)!,
|
||||
themeLightHover: Color.lerp(themeLightHover, other.themeLightHover, t)!,
|
||||
themeThick: Color.lerp(themeThick, other.themeThick, t)!,
|
||||
themeThickHover: Color.lerp(themeThickHover, other.themeThickHover, t)!,
|
||||
themeSelect: Color.lerp(themeSelect, other.themeSelect, t)!,
|
||||
infoLight: Color.lerp(infoLight, other.infoLight, t)!,
|
||||
infoLightHover: Color.lerp(infoLightHover, other.infoLightHover, t)!,
|
||||
infoThick: Color.lerp(infoThick, other.infoThick, t)!,
|
||||
infoThickHover: Color.lerp(infoThickHover, other.infoThickHover, t)!,
|
||||
successLight: Color.lerp(successLight, other.successLight, t)!,
|
||||
successLightHover:
|
||||
Color.lerp(successLightHover, other.successLightHover, t)!,
|
||||
successThick: Color.lerp(successThick, other.successThick, t)!,
|
||||
successThickHover:
|
||||
Color.lerp(successThickHover, other.successThickHover, t)!,
|
||||
warningLight: Color.lerp(warningLight, other.warningLight, t)!,
|
||||
warningLightHover:
|
||||
Color.lerp(warningLightHover, other.warningLightHover, t)!,
|
||||
warningThick: Color.lerp(warningThick, other.warningThick, t)!,
|
||||
warningThickHover:
|
||||
Color.lerp(warningThickHover, other.warningThickHover, t)!,
|
||||
errorLight: Color.lerp(errorLight, other.errorLight, t)!,
|
||||
errorLightHover: Color.lerp(errorLightHover, other.errorLightHover, t)!,
|
||||
errorThick: Color.lerp(errorThick, other.errorThick, t)!,
|
||||
errorThickHover: Color.lerp(errorThickHover, other.errorThickHover, t)!,
|
||||
errorSelect: Color.lerp(errorSelect, other.errorSelect, t)!,
|
||||
purpleLight: Color.lerp(purpleLight, other.purpleLight, t)!,
|
||||
purpleLightHover:
|
||||
Color.lerp(purpleLightHover, other.purpleLightHover, t)!,
|
||||
purpleThick: Color.lerp(purpleThick, other.purpleThick, t)!,
|
||||
purpleThickHover:
|
||||
Color.lerp(purpleThickHover, other.purpleThickHover, t)!,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,4 +18,20 @@ class AppFlowyIconColorScheme {
|
|||
final Color white;
|
||||
final Color purpleThick;
|
||||
final Color purpleThickHover;
|
||||
|
||||
AppFlowyIconColorScheme lerp(
|
||||
AppFlowyIconColorScheme other,
|
||||
double t,
|
||||
) {
|
||||
return AppFlowyIconColorScheme(
|
||||
primary: Color.lerp(primary, other.primary, t)!,
|
||||
secondary: Color.lerp(secondary, other.secondary, t)!,
|
||||
tertiary: Color.lerp(tertiary, other.tertiary, t)!,
|
||||
quaternary: Color.lerp(quaternary, other.quaternary, t)!,
|
||||
white: Color.lerp(white, other.white, t)!,
|
||||
purpleThick: Color.lerp(purpleThick, other.purpleThick, t)!,
|
||||
purpleThickHover:
|
||||
Color.lerp(purpleThickHover, other.purpleThickHover, t)!,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,4 +6,13 @@ class AppFlowyOtherColorsColorScheme {
|
|||
});
|
||||
|
||||
final Color textHighlight;
|
||||
|
||||
AppFlowyOtherColorsColorScheme lerp(
|
||||
AppFlowyOtherColorsColorScheme other,
|
||||
double t,
|
||||
) {
|
||||
return AppFlowyOtherColorsColorScheme(
|
||||
textHighlight: Color.lerp(textHighlight, other.textHighlight, t)!,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,4 +8,14 @@ class AppFlowySurfaceColorScheme {
|
|||
|
||||
final Color primary;
|
||||
final Color overlay;
|
||||
|
||||
AppFlowySurfaceColorScheme lerp(
|
||||
AppFlowySurfaceColorScheme other,
|
||||
double t,
|
||||
) {
|
||||
return AppFlowySurfaceColorScheme(
|
||||
primary: Color.lerp(primary, other.primary, t)!,
|
||||
overlay: Color.lerp(overlay, other.overlay, t)!,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,4 +44,32 @@ class AppFlowyTextColorScheme {
|
|||
final Color errorHover;
|
||||
final Color purple;
|
||||
final Color purpleHover;
|
||||
|
||||
AppFlowyTextColorScheme lerp(
|
||||
AppFlowyTextColorScheme other,
|
||||
double t,
|
||||
) {
|
||||
return AppFlowyTextColorScheme(
|
||||
primary: Color.lerp(primary, other.primary, t)!,
|
||||
secondary: Color.lerp(secondary, other.secondary, t)!,
|
||||
tertiary: Color.lerp(tertiary, other.tertiary, t)!,
|
||||
quaternary: Color.lerp(quaternary, other.quaternary, t)!,
|
||||
inverse: Color.lerp(inverse, other.inverse, t)!,
|
||||
onFill: Color.lerp(onFill, other.onFill, t)!,
|
||||
theme: Color.lerp(theme, other.theme, t)!,
|
||||
themeHover: Color.lerp(themeHover, other.themeHover, t)!,
|
||||
action: Color.lerp(action, other.action, t)!,
|
||||
actionHover: Color.lerp(actionHover, other.actionHover, t)!,
|
||||
info: Color.lerp(info, other.info, t)!,
|
||||
infoHover: Color.lerp(infoHover, other.infoHover, t)!,
|
||||
success: Color.lerp(success, other.success, t)!,
|
||||
successHover: Color.lerp(successHover, other.successHover, t)!,
|
||||
warning: Color.lerp(warning, other.warning, t)!,
|
||||
warningHover: Color.lerp(warningHover, other.warningHover, t)!,
|
||||
error: Color.lerp(error, other.error, t)!,
|
||||
errorHover: Color.lerp(errorHover, other.errorHover, t)!,
|
||||
purple: Color.lerp(purple, other.purple, t)!,
|
||||
purpleHover: Color.lerp(purpleHover, other.purpleHover, t)!,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue