[Design] Introduce EnteTheme

lib/ente_theme_data.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
-import 'package:photos/theme/colors.dart';
 import 'package:photos/theme/effects.dart';
+import 'package:photos/theme/ente_theme.dart';
 
 final lightThemeData = ThemeData(
   fontFamily: 'Inter',
@@ -373,11 +373,11 @@ extension CustomColorScheme on ColorScheme {
       ? Colors.black.withOpacity(0.32)
       : Colors.black.withOpacity(0.64);
 
-  Color get fillFaint =>
-      brightness == Brightness.light ? fillFaintLight : fillFaintDark;
-
   List<BoxShadow> get shadowMenu =>
       brightness == Brightness.light ? shadowMenuLight : shadowMenuDark;
+
+  EnteTheme get enteTheme =>
+      brightness == Brightness.light ? lightTheme : darkTheme;
 }
 
 OutlinedButtonThemeData buildOutlinedButtonThemeData({

lib/theme/colors.dart

@@ -2,6 +2,102 @@ import 'dart:ui';
 
 import 'package:flutter/material.dart';
 
+class EnteColorScheme {
+  // Background Colors
+  final Color backgroundBase;
+  final Color backgroundElevated;
+  final Color backgroundElevated2;
+
+  // Backdrop Colors
+  final Color backdropBase;
+  final Color backdropBaseMute;
+
+  // Text Colors
+  final Color textBase;
+  final Color textMuted;
+  final Color textFaint;
+
+  // Fill Colors
+  final Color fillBase;
+  final Color fillMuted;
+  final Color fillFaint;
+
+  // Stroke Colors
+  final Color strokeBase;
+  final Color strokeMuted;
+  final Color strokeFaint;
+
+  // Fixed Colors
+  final Color primary700;
+  final Color primary500;
+  final Color primary400;
+  final Color primary300;
+
+  final Color warning700;
+  final Color warning500;
+  final Color warning400;
+  final Color caution500;
+
+  const EnteColorScheme(
+    this.backgroundBase,
+    this.backgroundElevated,
+    this.backgroundElevated2,
+    this.backdropBase,
+    this.backdropBaseMute,
+    this.textBase,
+    this.textMuted,
+    this.textFaint,
+    this.fillBase,
+    this.fillMuted,
+    this.fillFaint,
+    this.strokeBase,
+    this.strokeMuted,
+    this.strokeFaint, {
+    this.primary700 = _primary700,
+    this.primary500 = _primary500,
+    this.primary400 = _primary400,
+    this.primary300 = _primary300,
+    this.warning700 = _warning700,
+    this.warning500 = _warning500,
+    this.warning400 = _warning700,
+    this.caution500 = _caution500,
+  });
+}
+
+const EnteColorScheme lightScheme = EnteColorScheme(
+  backgroundBaseLight,
+  backgroundElevatedLight,
+  backgroundElevated2Light,
+  backdropBaseLight,
+  backdropBaseMuteLight,
+  textBaseLight,
+  textMutedLight,
+  textFaintLight,
+  fillBaseLight,
+  fillMutedLight,
+  fillFaintLight,
+  strokeBaseLight,
+  strokeMutedLight,
+  strokeFaintLight,
+);
+
+const EnteColorScheme darkScheme = EnteColorScheme(
+  backgroundBaseDark,
+  backgroundElevatedDark,
+  backgroundElevated2Dark,
+  backdropBaseDark,
+  backdropBaseMuteDark,
+  textBaseDark,
+  textMutedDark,
+  textFaintDark,
+  fillBaseDark,
+  fillMutedDark,
+  fillFaintDark,
+  strokeBaseDark,
+  strokeMutedDark,
+  strokeFaintDark,
+);
+
 // Background Colors
 const Color backgroundBaseLight = Color.fromRGBO(255, 255, 255, 1);
 const Color backgroundElevatedLight = Color.fromRGBO(255, 255, 255, 1);
@@ -47,13 +143,14 @@ const Color strokeFaintDark = Color.fromRGBO(255, 255, 255, 0.16);
 
 // Fixed Colors
 
-const Color primary700 = Color.fromRGBO(0, 179, 60, 1);
-const Color primary500 = Color.fromRGBO(29, 185, 84, 1);
-const Color primary400 = Color.fromRGBO(38, 203, 95, 1);
-const Color primary300 = Color.fromRGBO(1, 222, 77, 1);
+const Color _primary700 = Color.fromRGBO(0, 179, 60, 1);
+const Color _primary500 = Color.fromRGBO(29, 185, 84, 1);
+const Color _primary400 = Color.fromRGBO(38, 203, 95, 1);
+const Color _primary300 = Color.fromRGBO(1, 222, 77, 1);
 
-const Color warning700 = Color.fromRGBO(234, 63, 63, 1);
+const Color _warning700 = Color.fromRGBO(234, 63, 63, 1);
+const Color _warning500 = Color.fromRGBO(255, 101, 101, 1);
 const Color warning500 = Color.fromRGBO(255, 101, 101, 1);
-const Color warning400 = Color.fromRGBO(255, 111, 111, 1);
+const Color _warning400 = Color.fromRGBO(255, 111, 111, 1);
 
-const Color caution500 = Color.fromRGBO(255, 194, 71, 1);
+const Color _caution500 = Color.fromRGBO(255, 194, 71, 1);

lib/theme/effects.dart

@@ -1,5 +1,9 @@
 import 'package:flutter/material.dart';
 
+const blurBase = 96;
+const blurMuted = 48;
+const blurFaint = 24;
+
 List<BoxShadow> shadowFloatLight = const [
   BoxShadow(blurRadius: 10, color: Color.fromRGBO(0, 0, 0, 0.25)),
 ];
@@ -45,7 +49,3 @@ List<BoxShadow> shadowButtonDark = const [
     offset: Offset(0, 4),
   ),
 ];
-
-const blurBase = 96;
-const blurMuted = 48;
-const blurFaint = 24;

lib/theme/ente_theme.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/widgets.dart';
+import 'package:photos/theme/colors.dart';
+import 'package:photos/theme/effects.dart';
+import 'package:photos/theme/text_style.dart';
+
+class EnteTheme {
+  final EnteTextTheme textTheme;
+  final EnteColorScheme colorScheme;
+  final List<BoxShadow> shadowFloat;
+  final List<BoxShadow> shadowMenu;
+  final List<BoxShadow> shadowButton;
+
+  const EnteTheme(
+    this.textTheme,
+    this.colorScheme, {
+    required this.shadowFloat,
+    required this.shadowMenu,
+    required this.shadowButton,
+  });
+}
+
+EnteTheme lightTheme = EnteTheme(
+  lightTextStyle,
+  lightScheme,
+  shadowFloat: shadowFloatLight,
+  shadowMenu: shadowMenuLight,
+  shadowButton: shadowButtonLight,
+);
+
+EnteTheme darkTheme = EnteTheme(
+  darkTextStyle,
+  darkScheme,
+  shadowFloat: shadowFloatDark,
+  shadowMenu: shadowMenuDark,
+  shadowButton: shadowButtonDark,
+);

lib/theme/text_style.dart

@@ -1,115 +1,117 @@
 import 'package:flutter/material.dart';
+import 'package:photos/theme/colors.dart';
 
-const FontWeight regularWeight = FontWeight.w500;
-const FontWeight boldWeight = FontWeight.w600;
+const FontWeight _regularWeight = FontWeight.w500;
+const FontWeight _boldWeight = FontWeight.w600;
 const String _fontFamily = 'Inter';
 
 const TextStyle h1 = TextStyle(
   fontSize: 48,
   height: 48 / 28,
-  fontWeight: regularWeight,
+  fontWeight: _regularWeight,
   fontFamily: _fontFamily,
 );
 const TextStyle h2 = TextStyle(
   fontSize: 32,
   height: 39 / 32.0,
-  fontWeight: regularWeight,
+  fontWeight: _regularWeight,
   fontFamily: _fontFamily,
 );
 const TextStyle h3 = TextStyle(
   fontSize: 24,
   height: 29 / 24.0,
-  fontWeight: regularWeight,
+  fontWeight: _regularWeight,
   fontFamily: _fontFamily,
 );
 const TextStyle large = TextStyle(
   fontSize: 18,
   height: 22 / 18.0,
-  fontWeight: regularWeight,
+  fontWeight: _regularWeight,
   fontFamily: _fontFamily,
 );
 const TextStyle body = TextStyle(
   fontSize: 16,
   height: 19.4 / 16.0,
-  fontWeight: regularWeight,
+  fontWeight: _regularWeight,
   fontFamily: _fontFamily,
 );
 const TextStyle small = TextStyle(
   fontSize: 14,
   height: 17 / 14.0,
-  fontWeight: regularWeight,
+  fontWeight: _regularWeight,
   fontFamily: _fontFamily,
 );
 const TextStyle mini = TextStyle(
   fontSize: 12,
   height: 15 / 12.0,
-  fontWeight: regularWeight,
+  fontWeight: _regularWeight,
   fontFamily: _fontFamily,
 );
 const TextStyle tiny = TextStyle(
   fontSize: 10,
   height: 12 / 10.0,
-  fontWeight: regularWeight,
+  fontWeight: _regularWeight,
   fontFamily: _fontFamily,
 );
 
-class EnteTextStyle {
-  final TextStyle? h1;
-  final TextStyle? h1Bold;
-  final TextStyle? h2;
-  final TextStyle? h2Bold;
-  final TextStyle? h3;
-  final TextStyle? h3Bold;
-  final TextStyle? large;
-  final TextStyle? largeBold;
-  final TextStyle? body;
-  final TextStyle? bodyBold;
-  final TextStyle? small;
-  final TextStyle? smallBold;
-  final TextStyle? mini;
-  final TextStyle? miniBold;
-  final TextStyle? tiny;
-  final TextStyle? tinyBold;
+class EnteTextTheme {
+  final TextStyle h1;
+  final TextStyle h1Bold;
+  final TextStyle h2;
+  final TextStyle h2Bold;
+  final TextStyle h3;
+  final TextStyle h3Bold;
+  final TextStyle large;
+  final TextStyle largeBold;
+  final TextStyle body;
+  final TextStyle bodyBold;
+  final TextStyle small;
+  final TextStyle smallBold;
+  final TextStyle mini;
+  final TextStyle miniBold;
+  final TextStyle tiny;
+  final TextStyle tinyBold;
 
-  const EnteTextStyle({
-    this.h1,
-    this.h1Bold,
-    this.h2,
-    this.h2Bold,
-    this.h3,
-    this.h3Bold,
-    this.large,
-    this.largeBold,
-    this.body,
-    this.bodyBold,
-    this.small,
-    this.smallBold,
-    this.mini,
-    this.miniBold,
-    this.tiny,
-    this.tinyBold,
+  const EnteTextTheme({
+    required this.h1,
+    required this.h1Bold,
+    required this.h2,
+    required this.h2Bold,
+    required this.h3,
+    required this.h3Bold,
+    required this.large,
+    required this.largeBold,
+    required this.body,
+    required this.bodyBold,
+    required this.small,
+    required this.smallBold,
+    required this.mini,
+    required this.miniBold,
+    required this.tiny,
+    required this.tinyBold,
   });
 }
 
-EnteTextStyle lightTextStyle = _buildEnteTextStyle(Colors.white);
-EnteTextStyle darkTextStyle = _buildEnteTextStyle(Colors.white);
+EnteTextTheme lightTextStyle = _buildEnteTextStyle(textBaseLight);
+EnteTextTheme darkTextStyle = _buildEnteTextStyle(textBaseDark);
 
-EnteTextStyle _buildEnteTextStyle(Color color) {
-  return EnteTextStyle(
+EnteTextTheme _buildEnteTextStyle(Color color) {
+  return EnteTextTheme(
     h1: h1.copyWith(color: color),
-    h1Bold: h1.copyWith(color: color, fontWeight: boldWeight),
+    h1Bold: h1.copyWith(color: color, fontWeight: _boldWeight),
     h2: h2.copyWith(color: color),
+    h2Bold: h2.copyWith(color: color, fontWeight: _boldWeight),
     h3: h3.copyWith(color: color),
-    h3Bold: h3.copyWith(color: color, fontWeight: boldWeight),
+    h3Bold: h3.copyWith(color: color, fontWeight: _boldWeight),
     large: large.copyWith(color: color),
-    largeBold: large.copyWith(color: color, fontWeight: boldWeight),
+    largeBold: large.copyWith(color: color, fontWeight: _boldWeight),
     body: body.copyWith(color: color),
-    bodyBold: body.copyWith(color: color, fontWeight: boldWeight),
+    bodyBold: body.copyWith(color: color, fontWeight: _boldWeight),
     small: small.copyWith(color: color),
-    smallBold: small.copyWith(color: color, fontWeight: boldWeight),
+    smallBold: small.copyWith(color: color, fontWeight: _boldWeight),
     mini: mini.copyWith(color: color),
-    miniBold: mini.copyWith(color: color, fontWeight: boldWeight),
+    miniBold: mini.copyWith(color: color, fontWeight: _boldWeight),
     tiny: tiny.copyWith(color: color),
-    tinyBold: tiny.copyWith(color: color, fontWeight: boldWeight),
+    tinyBold: tiny.copyWith(color: color, fontWeight: _boldWeight),
   );
 }

lib/ui/account/verify_recovery_page.dart

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_sodium/flutter_sodium.dart';
 import 'package:logging/logging.dart';
 import 'package:photos/core/event_bus.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/events/notification_event.dart';
 import 'package:photos/services/local_authentication_service.dart';
 import 'package:photos/services/user_remote_flag_service.dart';
@@ -118,6 +119,7 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
 
   @override
   Widget build(BuildContext context) {
+    final enteTheme = Theme.of(context).colorScheme.enteTheme;
     return Scaffold(
       appBar: AppBar(
         elevation: 0,
@@ -147,16 +149,17 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
                         width: double.infinity,
                         child: Text(
                           'Verify recovery key',
-                          style: Theme.of(context).textTheme.headline5,
+                          style: enteTheme.textTheme.h3Bold,
                           textAlign: TextAlign.left,
                         ),
                       ),
-                      const SizedBox(height: 12),
+                      const SizedBox(height: 18),
                       Text(
                         "If you forget your password, your recovery key is the "
                         "only way to recover your photos.\n\nPlease verify that "
                         "you have safely backed up your 24 word recovery key by re-entering it.",
-                        style: Theme.of(context).textTheme.subtitle2,
+                        style: enteTheme.textTheme.small
+                            .copyWith(color: enteTheme.colorScheme.textMuted),
                       ),
                       const SizedBox(height: 12),
                       TextFormField(
@@ -186,7 +189,8 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
                       const SizedBox(height: 12),
                       Text(
                         "If you saved the recovery key from older app versions, you might have a 64 character recovery code instead of 24 words. You can enter that too.",
-                        style: Theme.of(context).textTheme.caption,
+                        style: enteTheme.textTheme.mini
+                            .copyWith(color: enteTheme.colorScheme.textMuted),
                       ),
                       const SizedBox(height: 8),
                       Expanded(