config theme color and login screen color

app_flowy/assets/images/small_logo.svg

@@ -0,0 +1,11 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.9564 24.0195C38.8098 30.1683 33.7828 35.5321 28.0061 38.5411C27.3005 38.9336 26.4627 39.1516 25.6689 39.1952H37.9279C39.1185 39.1952 39.9564 38.323 39.9564 37.2328V24.0195Z" fill="#F7931E"/>
+<path d="M15.4381 12.1576C15.2617 12.2884 15.0853 12.4192 14.9089 12.55C11.9103 14.6432 2.82634 21.3589 0.753788 18.4371C-1.27467 15.6026 0.886079 7.57868 6.08952 3.69755C6.17771 3.61033 6.31 3.56672 6.3982 3.4795C12.0867 -0.48885 16.32 0.078058 18.3926 2.95621C20.3328 5.65992 18.1721 9.93353 15.4381 12.1576Z" fill="#8427E0"/>
+<path d="M33.8715 36.098C33.7833 36.1852 33.6951 36.2288 33.5628 36.316C27.8743 40.2844 23.641 39.7175 21.5684 36.8393C19.6282 34.1356 21.7889 29.862 24.5229 27.638C24.6993 27.5072 24.8757 27.3763 25.0521 27.2455C28.0507 25.1959 37.1347 18.4366 39.1631 21.3584C41.2357 24.1929 39.119 32.2169 33.8715 36.098Z" fill="#FFBD00"/>
+<path d="M17.9954 38.8459C15.085 40.8955 6.70658 38.6715 2.87014 33.264C2.78195 33.1768 2.69376 33.046 2.64966 32.9588C-1.09858 27.5078 -0.481224 23.4086 2.38508 21.4462C5.20728 19.4838 9.61698 21.7515 11.8218 24.586C11.91 24.7168 11.9982 24.804 12.0864 24.9349C14.159 27.8566 20.9499 36.8399 17.9954 38.8459Z" fill="#E3006D"/>
+<path d="M15.4385 12.1576C11.3816 13.9455 2.73857 17.6086 1.45976 14.6432C0.357338 12.1576 2.3858 7.09899 6.08994 3.69755C6.17814 3.61033 6.31043 3.56672 6.39862 3.4795C12.0871 -0.48885 16.3204 0.078058 18.393 2.95621C20.3333 5.65992 18.1725 9.93353 15.4385 12.1576Z" fill="#9327FF"/>
+<path d="M37.6624 18.3955C34.8402 20.3579 30.4305 18.0903 28.2257 15.2557C28.1375 15.1249 28.0493 15.0377 27.9611 14.9069C25.8444 11.9415 19.0535 2.95819 21.9639 0.952211C24.8743 -1.09738 33.2968 1.12664 37.1333 6.53407C37.2215 6.6649 37.3096 6.75211 37.3978 6.88294C41.102 12.334 40.5287 16.3895 37.6624 18.3955Z" fill="#00B5FF"/>
+<path d="M37.6628 18.3934C34.8406 20.3557 30.4309 18.0881 28.2261 15.2536C26.4181 11.1108 22.9344 2.95603 25.8448 1.73499C28.4906 0.601179 33.9587 2.86881 37.4423 6.88077C41.1024 12.3318 40.5291 16.3874 37.6628 18.3934Z" fill="#00C8FF"/>
+<path d="M33.8715 36.0986C33.7833 36.1858 33.6951 36.2294 33.5628 36.3166C27.8743 40.285 23.641 39.7181 21.5684 36.8399C19.6282 34.1362 21.7889 29.8626 24.5229 27.6386C28.5799 25.8506 37.2229 22.1875 38.5017 25.1529C39.6482 27.6386 37.6197 32.6971 33.8715 36.0986Z" fill="#FFCE00"/>
+<path d="M14.2031 38.061C11.5572 39.1948 6.08922 36.9708 2.64966 32.9588C-1.09858 27.5078 -0.481224 23.4086 2.38508 21.4462C5.20728 19.4838 9.61698 21.7515 11.8218 24.586C13.6298 28.6852 17.1135 36.8399 14.2031 38.061Z" fill="#FB006D"/>
+</svg>

app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart

@@ -2,6 +2,7 @@ import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/user/application/sign_in/sign_in_bloc.dart';
 import 'package:app_flowy/user/domain/i_auth.dart';
 import 'package:app_flowy/user/presentation/sign_in/widgets/background.dart';
+import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -10,6 +11,7 @@ import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:dartz/dartz.dart';
+import 'package:flowy_infra/image.dart';
 
 class SignInScreen extends StatelessWidget {
   final IAuthRouter router;
@@ -71,6 +73,7 @@ class SignInForm extends StatelessWidget {
           const EmailTextField(),
           const PasswordTextField(),
           ForgetPasswordButton(router: router),
+          const VSpace(30),
           const LoginButton(),
           const VSpace(10),
           SignUpPrompt(router: router),
@@ -94,18 +97,19 @@ class SignUpPrompt extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
     return Row(
       children: [
-        const Text("Dont't have an account",
-            style: TextStyle(color: Colors.blueGrey, fontSize: 12)),
+        Text("Dont't have an account",
+            style: TextStyle(color: theme.shader3, fontSize: 12)),
         TextButton(
           style: TextButton.styleFrom(
             textStyle: const TextStyle(fontSize: 12),
           ),
           onPressed: () => router.showSignUpScreen(context),
-          child: const Text(
+          child: Text(
             'Sign Up',
-            style: TextStyle(color: Colors.lightBlue),
+            style: TextStyle(color: theme.main1),
           ),
         ),
       ],
@@ -121,11 +125,12 @@ class LoginButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
     return RoundedTextButton(
       title: 'Login',
       height: 45,
       borderRadius: BorderRadius.circular(10),
-      color: Colors.lightBlue,
+      color: theme.main1,
       press: () {
         context
             .read<SignInBloc>()
@@ -145,14 +150,15 @@ class ForgetPasswordButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
     return TextButton(
       style: TextButton.styleFrom(
         textStyle: const TextStyle(fontSize: 12),
       ),
       onPressed: () => router.showForgetPasswordScreen(context),
-      child: const Text(
+      child: Text(
         'Forgot Password?',
-        style: TextStyle(color: Colors.lightBlue),
+        style: TextStyle(color: theme.main1),
       ),
     );
   }
@@ -165,15 +171,18 @@ class PasswordTextField extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
     return BlocBuilder<SignInBloc, SignInState>(
       buildWhen: (previous, current) =>
           previous.passwordError != current.passwordError,
       builder: (context, state) {
         return RoundedInputField(
           obscureText: true,
+          obscureIcon: svgWidgetWithName("home/Hide.svg"),
+          obscureHideIcon: svgWidgetWithName("home/Show.svg"),
           hintText: 'password',
-          normalBorderColor: Colors.green,
-          highlightBorderColor: Colors.red,
+          normalBorderColor: theme.shader4,
+          highlightBorderColor: theme.red,
           errorText: context
               .read<SignInBloc>()
               .state
@@ -195,14 +204,15 @@ class EmailTextField extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
     return BlocBuilder<SignInBloc, SignInState>(
       buildWhen: (previous, current) =>
           previous.emailError != current.emailError,
       builder: (context, state) {
         return RoundedInputField(
           hintText: 'email',
-          normalBorderColor: Colors.green,
-          highlightBorderColor: Colors.red,
+          normalBorderColor: theme.shader4,
+          highlightBorderColor: theme.red,
           errorText: context
               .read<SignInBloc>()
               .state

app_flowy/lib/user/presentation/sign_in/widgets/background.dart

@@ -1,5 +1,8 @@
+import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 class SignInFormContainer extends StatelessWidget {
   final List<Widget> children;
@@ -32,22 +35,19 @@ class SignInTitle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
     return SizedBox(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Image(
-              fit: BoxFit.cover,
-              width: logoSize.width,
-              height: logoSize.height,
-              image: const AssetImage('assets/images/app_flowy_logo.jpg')),
+          svgWidgetWithName("small_logo.svg"),
           const VSpace(30),
           Text(
             title,
-            style: const TextStyle(
-              color: Colors.black,
-              fontWeight: FontWeight.bold,
-              fontSize: 20,
+            style: TextStyle(
+              color: theme.shader1,
+              fontWeight: FontWeight.w600,
+              fontSize: 24,
             ),
           )
         ],

app_flowy/lib/workspace/domain/image.dart

@@ -1,7 +1,6 @@
 import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart';
 import 'package:flutter/material.dart';
-
-import 'package:flutter_svg/flutter_svg.dart';
+import 'package:flowy_infra/image.dart';
 
 AssetImage assetImageForViewType(ViewType type) {
   final imageName = imageNameForViewType(type);
@@ -10,9 +9,7 @@ AssetImage assetImageForViewType(ViewType type) {
 
 Widget svgImageForViewType(ViewType type) {
   final imageName = imageNameForViewType(type);
-  final Widget svg = SvgPicture.asset(
-    'assets/images/$imageName',
-  );
+  final Widget svg = svgWidgetWithName(imageName);
 
   return svg;
 }

app_flowy/packages/flowy_infra/lib/image.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+Widget svgWidgetWithName(String name) {
+  final Widget svg = SvgPicture.asset(
+    'assets/images/$name',
+  );
+
+  return svg;
+}

app_flowy/packages/flowy_infra/lib/theme.dart

@@ -11,9 +11,7 @@ class AppTheme {
   static ThemeType defaultTheme = ThemeType.light;
 
   bool isDark;
-  late Color bg1; //
   late Color surface; //
-  late Color bg2;
   late Color accent1;
   late Color accent1Dark;
   late Color accent1Darker;
@@ -24,10 +22,41 @@ class AppTheme {
   late Color greyWeak;
   late Color error;
   late Color focus;
-
   late Color txt;
   late Color accentTxt;
 
+  late Color hover;
+  late Color selector;
+  late Color red;
+  late Color yellow;
+  late Color green;
+
+  late Color shader1;
+  late Color shader2;
+  late Color shader3;
+  late Color shader4;
+  late Color shader5;
+  late Color shader6;
+  late Color shader7;
+
+  late Color bg1;
+  late Color bg2;
+  late Color bg3;
+  late Color bg4;
+
+  late Color tint1;
+  late Color tint2;
+  late Color tint3;
+  late Color tint4;
+  late Color tint5;
+  late Color tint6;
+  late Color tint7;
+  late Color tint8;
+  late Color tint9;
+
+  late Color main1;
+  late Color main2;
+
   /// Default constructor
   AppTheme({this.isDark = true}) {
     txt = isDark ? Colors.white : Colors.black;
@@ -39,8 +68,6 @@ class AppTheme {
     switch (t) {
       case ThemeType.light:
         return AppTheme(isDark: false)
-          ..bg1 = const Color.fromARGB(255, 247, 248, 252)
-          ..bg2 = const Color(0xffc1dcbc)
           ..surface = Colors.white
           ..accent1 = const Color(0xff00a086)
           ..accent1Dark = const Color(0xff00856f)
@@ -51,7 +78,34 @@ class AppTheme {
           ..grey = const Color(0xff515d5a)
           ..greyStrong = const Color(0xff151918)
           ..error = Colors.red.shade900
-          ..focus = const Color(0xFF0ee2b1);
+          ..focus = const Color(0xFFe0f8ff)
+          ..hover = const Color(0xFFe0f8ff) //
+          ..selector = const Color(0xfff2fcff)
+          ..red = const Color(0xfffb006d)
+          ..yellow = const Color(0xffffd667)
+          ..green = const Color(0xff66cf80)
+          ..shader1 = const Color(0xff333333)
+          ..shader2 = const Color(0xff4f4f4f)
+          ..shader3 = const Color(0xff828282)
+          ..shader4 = const Color(0xffbdbdbd)
+          ..shader5 = const Color(0xffe0e0e0)
+          ..shader6 = const Color(0xfff2f2f2)
+          ..shader7 = const Color(0xffffffff)
+          ..bg1 = const Color(0xfff7f8fc)
+          ..bg2 = const Color(0xffedeef2)
+          ..bg3 = const Color(0xffe2e4eb)
+          ..bg4 = const Color(0xff2c144b)
+          ..tint1 = const Color(0xffe8e0ff)
+          ..tint2 = const Color(0xffffe7fd)
+          ..tint3 = const Color(0xffffe7ee)
+          ..tint4 = const Color(0xffffefe3)
+          ..tint5 = const Color(0xfffff2cd)
+          ..tint6 = const Color(0xfff5ffdc)
+          ..tint7 = const Color(0xffddffd6)
+          ..tint8 = const Color(0xffdefff1)
+          ..tint9 = const Color(0xffdefff1)
+          ..main1 = const Color(0xff00bcf0)
+          ..main2 = const Color(0xff00b7ea);
 
       case ThemeType.dark:
         return AppTheme(isDark: true)
@@ -67,7 +121,34 @@ class AppTheme {
           ..grey = const Color(0xffced4d3)
           ..greyStrong = const Color(0xffffffff)
           ..error = const Color(0xffe55642)
-          ..focus = const Color(0xff0ee2b1);
+          ..focus = const Color(0xff0ee2b1)
+          ..hover = const Color(0xFFe0f8ff) //
+          ..selector = const Color(0xfff2fcff)
+          ..red = const Color(0xfffb006d)
+          ..yellow = const Color(0xffffd667)
+          ..green = const Color(0xff66cf80)
+          ..shader1 = const Color(0xff333333)
+          ..shader2 = const Color(0xff4f4f4f)
+          ..shader3 = const Color(0xff828282)
+          ..shader4 = const Color(0xffbdbdbd)
+          ..shader5 = const Color(0xffe0e0e0)
+          ..shader6 = const Color(0xfff2f2f2)
+          ..shader7 = const Color(0xffffffff)
+          ..bg1 = const Color(0xfff7f8fc)
+          ..bg2 = const Color(0xffedeef2)
+          ..bg3 = const Color(0xffe2e4eb)
+          ..bg4 = const Color(0xff2c144b)
+          ..tint1 = const Color(0xffe8e0ff)
+          ..tint2 = const Color(0xffffe7fd)
+          ..tint3 = const Color(0xffffe7ee)
+          ..tint4 = const Color(0xffffefe3)
+          ..tint5 = const Color(0xfffff2cd)
+          ..tint6 = const Color(0xfff5ffdc)
+          ..tint7 = const Color(0xffddffd6)
+          ..tint8 = const Color(0xffdefff1)
+          ..tint9 = const Color(0xffdefff1)
+          ..main1 = const Color(0xff00bcf0)
+          ..main2 = const Color(0xff00b7ea);
     }
   }
 
@@ -76,23 +157,23 @@ class AppTheme {
       textTheme: (isDark ? ThemeData.dark() : ThemeData.light()).textTheme,
       colorScheme: ColorScheme(
           brightness: isDark ? Brightness.dark : Brightness.light,
-          primary: accent1,
-          primaryVariant: accent1Darker,
-          secondary: accent2,
-          secondaryVariant: ColorUtils.shiftHsl(accent2, -.2),
+          primary: main1,
+          primaryVariant: main2,
+          secondary: bg1,
+          secondaryVariant: bg2,
           background: bg1,
           surface: surface,
-          onBackground: txt,
+          onBackground: bg1,
           onSurface: txt,
-          onError: txt,
-          onPrimary: accentTxt,
-          onSecondary: accentTxt,
+          onError: red,
+          onPrimary: bg1,
+          onSecondary: bg1,
           error: error),
     );
     return t.copyWith(
         materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-        highlightColor: accent1,
-        toggleableActiveColor: accent1);
+        highlightColor: main1,
+        toggleableActiveColor: main1);
   }
 
   Color shift(Color c, double d) =>

app_flowy/packages/flowy_infra/pubspec.lock

@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.6.1"
+    version: "2.7.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -28,7 +28,7 @@ packages:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.1"
   clock:
     dependency: transitive
     description:
@@ -69,6 +69,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  flutter_svg:
+    dependency: "direct main"
+    description:
+      name: flutter_svg
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.22.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -101,7 +108,7 @@ packages:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.7.0"
   path:
     dependency: transitive
     description:
@@ -109,6 +116,27 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0"
+  path_drawing:
+    dependency: transitive
+    description:
+      name: path_drawing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.5.1"
+  path_parsing:
+    dependency: transitive
+    description:
+      name: path_parsing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.1"
+  petitparser:
+    dependency: transitive
+    description:
+      name: petitparser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.2.0"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -155,7 +183,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.3.0"
+    version: "0.4.1"
   textstyle_extensions:
     dependency: "direct main"
     description:
@@ -191,6 +219,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0"
+  xml:
+    dependency: transitive
+    description:
+      name: xml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.2.0"
 sdks:
-  dart: ">=2.12.0 <3.0.0"
-  flutter: ">=1.17.0"
+  dart: ">=2.13.0 <3.0.0"
+  flutter: ">=1.24.0-7.0"

app_flowy/packages/flowy_infra/pubspec.yaml

@@ -14,6 +14,7 @@ dependencies:
   uuid: ">=2.2.2"
   textstyle_extensions: '2.0.0-nullsafety'
   logger: ^1.0.0
+  flutter_svg: ^0.22.0
 
 dev_dependencies:
   flutter_test:

app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart

@@ -117,12 +117,12 @@ class ScrollbarState extends State<StyledScrollbar> {
         var showHandle = contentExtent > _viewExtent && contentExtent > 0;
         // Handle color
         var handleColor = widget.handleColor ??
-            (theme.isDark ? theme.greyWeak.withOpacity(.2) : theme.greyWeak);
+            (theme.isDark ? theme.bg2.withOpacity(.2) : theme.bg2);
         // Track color
         var trackColor = widget.trackColor ??
             (theme.isDark
-                ? theme.greyWeak.withOpacity(.1)
-                : theme.greyWeak.withOpacity(.3));
+                ? theme.bg2.withOpacity(.1)
+                : theme.bg2.withOpacity(.3));
 
         //Layout the stack, it just contains a child, and
         return Stack(children: <Widget>[

app_flowy/packages/flowy_infra_ui/lib/style_widget/text_input.dart

@@ -200,7 +200,7 @@ class StyledSearchTextInputState extends State<StyledSearchTextInput> {
         autocorrect: widget.autoCorrect ?? false,
         enableSuggestions: widget.enableSuggestions ?? false,
         style: widget.style ?? TextStyles.Body1,
-        cursorColor: theme.accent1,
+        cursorColor: theme.main1,
         controller: _controller,
         showCursor: true,
         enabled: widget.enabled,
@@ -218,7 +218,7 @@ class StyledSearchTextInputState extends State<StyledSearchTextInput> {
                 errorText: widget.errorText,
                 errorMaxLines: 2,
                 hintText: widget.hintText,
-                hintStyle: TextStyles.Body1.textColor(theme.grey),
+                hintStyle: TextStyles.Body1.textColor(theme.shader4),
                 labelText: widget.label),
       ),
     );

app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart

@@ -82,7 +82,7 @@ class _BaseStyledBtnState extends State<BaseStyledButton> {
         boxShadow: _isFocused
             ? [
                 BoxShadow(
-                    color: theme.focus.withOpacity(0.25),
+                    color: theme.shader6,
                     offset: Offset.zero,
                     blurRadius: 8.0,
                     spreadRadius: 0.0),
@@ -99,7 +99,7 @@ class _BaseStyledBtnState extends State<BaseStyledButton> {
               shape: RoundedRectangleBorder(
                 side: BorderSide(
                   width: 1.8,
-                  color: theme.focus,
+                  color: theme.shader6,
                 ),
                 borderRadius:
                     BorderRadius.circular(widget.borderRadius ?? Corners.s5),
@@ -119,8 +119,8 @@ class _BaseStyledBtnState extends State<BaseStyledButton> {
         highlightElevation: 0,
         focusElevation: 0,
         fillColor: Colors.transparent,
-        hoverColor: widget.hoverColor ?? theme.surface,
-        highlightColor: widget.downColor ?? theme.accent1.withOpacity(.1),
+        hoverColor: widget.hoverColor ?? theme.hover,
+        highlightColor: widget.downColor ?? theme.main1,
         focusColor: widget.focusColor ?? Colors.grey.withOpacity(0.35),
         child: Opacity(
           child: Padding(

app_flowy/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart

@@ -23,9 +23,9 @@ class PrimaryButton extends StatelessWidget {
       minWidth: bigMode ? 160 : 78,
       minHeight: bigMode ? 60 : 42,
       contentPadding: EdgeInsets.all(bigMode ? Insets.l : Insets.m),
-      bgColor: theme.accent1Darker,
-      hoverColor: theme.isDark ? theme.accent1 : theme.accent1Dark,
-      downColor: theme.accent1Darker,
+      bgColor: theme.bg1,
+      hoverColor: theme.hover,
+      downColor: theme.selector,
       borderRadius: bigMode ? Corners.s8 : Corners.s5,
       child: child,
       onPressed: onPressed,

app_flowy/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart

@@ -18,7 +18,7 @@ class SecondaryTextButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-    TextStyle txtStyle = TextStyles.Footnote.textColor(theme.accent1Darker);
+    TextStyle txtStyle = TextStyles.Footnote.textColor(theme.shader1);
     return SecondaryButton(
         onPressed: onPressed, child: Text(label, style: txtStyle));
   }
@@ -42,7 +42,7 @@ class SecondaryIconButton extends StatelessWidget {
       minHeight: 36,
       minWidth: 36,
       contentPadding: Insets.sm,
-      child: FlowyImageIcon(icon, size: 20, color: color ?? theme.grey),
+      child: FlowyImageIcon(icon, size: 20, color: color ?? theme.shader4),
     );
   }
 }
@@ -82,12 +82,11 @@ class _SecondaryButtonState extends State<SecondaryButton> {
         minWidth: widget.minWidth ?? 78,
         minHeight: widget.minHeight ?? 42,
         contentPadding: EdgeInsets.all(widget.contentPadding ?? Insets.m),
-        bgColor: theme.surface,
-        outlineColor:
-            (_isMouseOver ? theme.accent1 : theme.grey).withOpacity(.35),
-        hoverColor: theme.surface,
+        bgColor: theme.bg1,
+        outlineColor: (_isMouseOver ? theme.hover : theme.shader6),
+        hoverColor: theme.hover,
         onFocusChanged: widget.onFocusChanged,
-        downColor: theme.greyWeak.withOpacity(.35),
+        downColor: theme.selector,
         borderRadius: Corners.s5,
         child: IgnorePointer(child: widget.child),
         onPressed: widget.onPressed,

app_flowy/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart

@@ -132,7 +132,7 @@ class StyledDialog extends StatelessWidget {
 
     Widget innerContent = Container(
       padding: padding ?? EdgeInsets.all(Insets.lGutter),
-      color: bgColor ?? theme.surface,
+      color: bgColor ?? theme.bg1,
       child: child,
     );
 
@@ -198,9 +198,9 @@ class OkCancelDialog extends StatelessWidget {
         children: <Widget>[
           if (title != null) ...[
             Text(title!.toUpperCase(),
-                style: TextStyles.T1.textColor(theme.accent1Darker)),
+                style: TextStyles.T1.textColor(theme.shader1)),
             VSpace(Insets.sm * 1.5),
-            Container(color: theme.greyWeak.withOpacity(.35), height: 1),
+            Container(color: theme.bg1, height: 1),
             VSpace(Insets.m * 1.5),
           ],
           Text(message, style: TextStyles.Body1.textHeight(1.5)),

app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart

@@ -8,6 +8,8 @@ class RoundedInputField extends StatefulWidget {
   final String? hintText;
   final IconData? icon;
   final bool obscureText;
+  final Widget? obscureIcon;
+  final Widget? obscureHideIcon;
   final Color normalBorderColor;
   final Color highlightBorderColor;
   final String errorText;
@@ -19,6 +21,8 @@ class RoundedInputField extends StatefulWidget {
     this.hintText,
     this.icon,
     this.obscureText = false,
+    this.obscureIcon,
+    this.obscureHideIcon,
     this.onChanged,
     this.normalBorderColor = Colors.transparent,
     this.highlightBorderColor = Colors.transparent,
@@ -84,13 +88,28 @@ class _RoundedInputFieldState extends State<RoundedInputField> {
     if (widget.obscureText == false) {
       return null;
     }
+
+    Widget? icon;
+    if (widget.obscureText == true) {
+      assert(widget.obscureIcon != null && widget.obscureHideIcon != null);
+      if (widget.enableObscure) {
+        icon = widget.obscureIcon!;
+      } else {
+        icon = widget.obscureHideIcon!;
+      }
+    }
+
+    if (icon == null) {
+      return null;
+    }
+
     return RoundedImageButton(
       size: 20,
       press: () {
         widget.enableObscure = !widget.enableObscure;
         setState(() {});
       },
-      child: const Icon(Icons.password, size: 15),
+      child: icon,
     );
   }
 }

app_flowy/pubspec.yaml

@@ -88,6 +88,7 @@ flutter:
   # To add assets to your application, add an assets section, like this:
   assets:
     - assets/images/
+    - assets/images/home/
   #   - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see