beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #526 from ente-io/ente_theme

Browse source 
[Design] Introduce EnteTheme
This commit is contained in:
Neeraj Gupta 2022-09-23 16:07:44 +05:30 committed by GitHub
parent 5b0d917aed aa6bda9222
commit fcc785df8b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 222 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
lib/ente_theme_data.dart
View file

@ -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',
@ -219,25 +219,17 @@ TextTheme _buildTextTheme(Color textColor) {
}
extension CustomColorScheme on ColorScheme {
Color get defaultBackgroundColor => brightness == Brightness.light
? const Color.fromRGBO(255, 255, 255, 1)
: const Color.fromRGBO(0, 0, 0, 1);
Color get defaultBackgroundColor =>
brightness == Brightness.light ? backgroundBaseLight : backgroundBaseDark;
Color get defaultTextColor => brightness == Brightness.light
? const Color.fromRGBO(0, 0, 0, 1)
: const Color.fromRGBO(255, 255, 255, 1);
Color get inverseBackgroundColor =>
brightness != Brightness.light ? backgroundBaseLight : backgroundBaseDark;
Color get inverseTextColor => brightness == Brightness.light
? const Color.fromRGBO(255, 255, 255, 1)
: const Color.fromRGBO(0, 0, 0, 1);
Color get defaultTextColor =>
brightness == Brightness.light ? textBaseLight : textBaseDark;
Color get inverseIconColor => brightness == Brightness.light
? const Color.fromRGBO(255, 255, 255, 1)
: const Color.fromRGBO(0, 0, 0, 1);
Color get inverseBackgroundColor => brightness == Brightness.light
? const Color.fromRGBO(0, 0, 0, 1)
: const Color.fromRGBO(255, 255, 255, 1);
Color get inverseTextColor =>
brightness != Brightness.light ? textBaseLight : textBaseDark;
Color get boxSelectColor => brightness == Brightness.light
? const Color.fromRGBO(67, 186, 108, 1)
@ -349,14 +341,6 @@ extension CustomColorScheme on ColorScheme {
? const Color.fromRGBO(180, 180, 180, 1)
: const Color.fromRGBO(100, 100, 100, 1);
Color get themeSwitchIndicatorColor => brightness == Brightness.light
? const Color.fromRGBO(0, 0, 0, 1).withOpacity(0.75)
: const Color.fromRGBO(255, 255, 255, 1);
Color get themeSwitchActiveIconColor => brightness == Brightness.light
? const Color.fromRGBO(255, 255, 255, 1)
: const Color.fromRGBO(0, 0, 0, 1);
Color get themeSwitchInactiveIconColor => brightness == Brightness.light
? const Color.fromRGBO(0, 0, 0, 1).withOpacity(0.5)
: const Color.fromRGBO(255, 255, 255, 1).withOpacity(0.5);
@ -373,11 +357,8 @@ 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({

111
lib/theme/colors.dart
View file

@ -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);

8
lib/theme/effects.dart
View file

@ -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;

36
lib/theme/ente_theme.dart Normal file
View file

@ -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(
lightTextTheme,
lightScheme,
shadowFloat: shadowFloatLight,
shadowMenu: shadowMenuLight,
shadowButton: shadowButtonLight,
);
EnteTheme darkTheme = EnteTheme(
darkTextTheme,
darkScheme,
shadowFloat: shadowFloatDark,
shadowMenu: shadowMenuDark,
shadowButton: shadowButtonDark,
);

112
lib/theme/text_style.dart
View file

@ -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 lightTextTheme = _buildEnteTextStyle(textBaseLight);
EnteTextTheme darkTextTheme = _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),
);
}

12
lib/ui/account/verify_recovery_page.dart
View file

@ -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(

4
lib/ui/components/notification_warning_widget.dart
View file

@ -29,7 +29,7 @@ class NotificationWarningWidget extends StatelessWidget {
borderRadius: const BorderRadius.all(
Radius.circular(8),
),
boxShadow: Theme.of(context).colorScheme.shadowMenu,
boxShadow: Theme.of(context).colorScheme.enteTheme.shadowMenu,
color: warning500,
),
child: Padding(
@ -45,7 +45,7 @@ class NotificationWarningWidget extends StatelessWidget {
Flexible(
child: Text(
text,
style: darkTextStyle.bodyBold,
style: darkTextTheme.bodyBold,
textAlign: TextAlign.left,
),
),