diff --git a/auth/lib/onboarding/view/common/tag_chip.dart b/auth/lib/onboarding/view/common/tag_chip.dart index efd246cfe..7f71e68b8 100644 --- a/auth/lib/onboarding/view/common/tag_chip.dart +++ b/auth/lib/onboarding/view/common/tag_chip.dart @@ -1,6 +1,7 @@ import "package:ente_auth/l10n/l10n.dart"; import "package:ente_auth/onboarding/model/tag_enums.dart"; import "package:ente_auth/store/code_display_store.dart"; +import "package:ente_auth/theme/ente_theme.dart"; import "package:flutter/material.dart"; import "package:gradient_borders/box_borders/gradient_box_border.dart"; @@ -20,35 +21,21 @@ class TagChip extends StatelessWidget { @override Widget build(BuildContext context) { + final colorScheme = getEnteColorScheme(context); + return GestureDetector( onTap: onTap, child: Container( decoration: BoxDecoration( color: state == TagChipState.selected - ? const Color(0xFF722ED1) - : Theme.of(context).brightness == Brightness.dark - ? const Color(0xFF1C0F22) - : const Color(0xFFFCF5FF), + ? colorScheme.tagChipSelectedColor + : colorScheme.tagChipUnselectedColor, borderRadius: BorderRadius.circular(100), border: GradientBoxBorder( gradient: LinearGradient( colors: state == TagChipState.selected - ? [ - const Color(0xFFB37FEB), - const Color(0xFFAE40E3).withOpacity( - Theme.of(context).brightness == Brightness.dark - ? .53 - : 1, - ), - ] - : [ - Theme.of(context).brightness == Brightness.dark - ? const Color(0xFFAD00FF) - : const Color(0xFFAD00FF).withOpacity(0.2), - Theme.of(context).brightness == Brightness.dark - ? const Color(0xFFA269BD).withOpacity(0.53) - : const Color(0xFF8609C2).withOpacity(0.2), - ], + ? colorScheme.tagChipSelectedGradient + : colorScheme.tagChipUnselectedGradient, begin: Alignment.topLeft, end: Alignment.bottomRight, ), @@ -66,7 +53,7 @@ class TagChip extends StatelessWidget { color: state == TagChipState.selected || Theme.of(context).brightness == Brightness.dark ? Colors.white - : const Color(0xFF8232E1), + : colorScheme.tagTextUnselectedColor, ), ), if (state == TagChipState.selected && @@ -114,16 +101,16 @@ class TagChip extends StatelessWidget { PopupMenuItem( child: Row( children: [ - const Icon( + Icon( Icons.delete_outline, size: 16, - color: Color(0xFFF53434), + color: colorScheme.deleteTagIconColor, ), const SizedBox(width: 12), Text( context.l10n.delete, - style: const TextStyle( - color: Color(0xFFF53434), + style: TextStyle( + color: colorScheme.deleteTagTextColor, ), ), ], diff --git a/auth/lib/theme/colors.dart b/auth/lib/theme/colors.dart index 49f47abe5..278c00777 100644 --- a/auth/lib/theme/colors.dart +++ b/auth/lib/theme/colors.dart @@ -1,5 +1,3 @@ -import 'dart:ui'; - import 'package:flutter/material.dart'; class EnteColorScheme { @@ -50,6 +48,28 @@ class EnteColorScheme { final Color caution500; final List avatarColors; + + // Tags + final Color tagChipSelectedColor; + final Color tagChipUnselectedColor; + final List tagChipSelectedGradient; + final List tagChipUnselectedGradient; + final Color tagTextUnselectedColor; + final Color deleteTagIconColor; + final Color deleteTagTextColor; + + // Code Widget + final Color errorCodeProgressColor; + final Color infoIconColor; + final Color errorCardTextColor; + final Color deleteCodeTextColor; + final List pinnedCardBoxShadow; + final Color pinnedBgColor; + + // Gradient Button + final Color gradientButtonBgColor; + final List gradientButtonBgColors; + const EnteColorScheme( this.backgroundBase, this.backgroundElevated, @@ -73,7 +93,22 @@ class EnteColorScheme { this.blurStrokeFaint, this.blurStrokePressed, this.avatarColors, - this.iconButtonColor, { + this.iconButtonColor, + this.tagChipUnselectedColor, + this.tagChipSelectedGradient, + this.tagChipUnselectedGradient, + this.pinnedBgColor, { + this.tagChipSelectedColor = _tagChipSelectedColor, + this.tagTextUnselectedColor = _tagTextUnselectedColor, + this.deleteTagIconColor = _deleteTagIconColor, + this.deleteTagTextColor = _deleteTagTextColor, + this.errorCodeProgressColor = _errorCodeProgressColor, + this.infoIconColor = _infoIconColor, + this.errorCardTextColor = _errorCardTextColor, + this.deleteCodeTextColor = _deleteCodeTextColor, + this.pinnedCardBoxShadow = _pinnedCardBoxShadow, + this.gradientButtonBgColor = _gradientButtonBgColor, + this.gradientButtonBgColors = _gradientButtonBgColors, this.primaryGreen = _primaryGreen, this.primary700 = _primary700, this.primary500 = _primary500, @@ -111,6 +146,10 @@ const EnteColorScheme lightScheme = EnteColorScheme( blurStrokePressedLight, avatarLight, _iconButtonBrightColor, + _tagChipUnselectedColorLight, + _tagChipSelectedGradientLight, + _tagChipUnselectedGradientLight, + _pinnedBgColorLight, ); const EnteColorScheme darkScheme = EnteColorScheme( @@ -137,6 +176,10 @@ const EnteColorScheme darkScheme = EnteColorScheme( blurStrokePressedDark, avatarDark, _iconButtonDarkColor, + _tagChipUnselectedColorDark, + _tagChipSelectedGradientDark, + _tagChipUnselectedGradientDark, + _pinnedBgColorDark, ); // Background Colors @@ -268,3 +311,64 @@ const List avatarDark = [ Color.fromRGBO(209, 132, 132, 1), Color.fromRGBO(120, 181, 167, 1), ]; + +// Tags +const Color _tagChipUnselectedColorLight = Color(0xFFFCF5FF); +const Color _tagChipUnselectedColorDark = Color(0xFF1C0F22); +const List _tagChipUnselectedGradientLight = [ + Color(0x33AD00FF), + Color(0x338609C2), +]; +const List _tagChipUnselectedGradientDark = [ + Color(0xFFAD00FF), + Color(0x87A269BD), +]; +const Color _tagChipSelectedColor = Color(0xFF722ED1); +const List _tagChipSelectedGradientLight = [ + Color(0xFFB37FEB), + Color(0xFFAE40E3), +]; +const List _tagChipSelectedGradientDark = [ + Color(0xFFB37FEB), + Color(0x87AE40E3), +]; +const Color _tagTextUnselectedColor = Color(0xFF8232E1); +const Color _deleteTagIconColor = Color(0xFFF53434); +const Color _deleteTagTextColor = Color(0xFFF53434); + +// Code Widget +const Color _pinnedBgColorLight = Color(0xFFF9ECFF); +const Color _pinnedBgColorDark = Color(0xFF390C4F); +const Color _errorCodeProgressColor = Color(0xFFF53434); +const Color _infoIconColor = Color(0xFFF53434); +const Color _errorCardTextColor = Color(0xFFF53434); +const Color _deleteCodeTextColor = Color(0xFFFE4A49); +const List _pinnedCardBoxShadow = [ + BoxShadow( + color: Color(0x08000000), + blurRadius: 2, + offset: Offset(0, 7), + ), + BoxShadow( + color: Color(0x17000000), + blurRadius: 2, + offset: Offset(0, 4), + ), + BoxShadow( + color: Color(0x29000000), + blurRadius: 1, + offset: Offset(0, 1), + ), + BoxShadow( + color: Color(0x2E000000), + blurRadius: 1, + offset: Offset(0, 0), + ), +]; + +// Gradient Button +const Color _gradientButtonBgColor = Color(0xFF531DAB); +const List _gradientButtonBgColors = [ + Color(0xFFB37FEB), + Color(0xFF22075E), +]; diff --git a/auth/lib/ui/code_error_widget.dart b/auth/lib/ui/code_error_widget.dart index 0aefd98bb..6aaa96436 100644 --- a/auth/lib/ui/code_error_widget.dart +++ b/auth/lib/ui/code_error_widget.dart @@ -1,6 +1,7 @@ import 'package:ente_auth/ente_theme_data.dart'; import 'package:ente_auth/l10n/l10n.dart'; import 'package:ente_auth/services/update_service.dart'; +import 'package:ente_auth/theme/ente_theme.dart'; import 'package:ente_auth/ui/common/gradient_button.dart'; import 'package:ente_auth/ui/linear_progress_widget.dart'; import 'package:ente_auth/ui/settings/app_update_dialog.dart'; @@ -12,6 +13,8 @@ class CodeErrorWidget extends StatelessWidget { @override Widget build(BuildContext context) { + final colorScheme = getEnteColorScheme(context); + return Container( height: 132, width: double.infinity, @@ -30,10 +33,10 @@ class CodeErrorWidget extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const SizedBox( + SizedBox( height: 3, child: LinearProgressWidget( - color: Color(0xFFF53434), + color: colorScheme.errorCodeProgressColor, fractionOfStorage: 1, ), ), @@ -41,21 +44,21 @@ class CodeErrorWidget extends StatelessWidget { Row( children: [ const SizedBox(width: 8), - const Align( + Align( alignment: Alignment.center, child: Icon( Icons.info, size: 18, - color: Color(0xFFF53434), + color: colorScheme.infoIconColor, ), ), const SizedBox(width: 8), Text( context.l10n.error, - style: const TextStyle( + style: TextStyle( fontSize: 18, fontWeight: FontWeight.w600, - color: Color(0xFFF53434), + color: colorScheme.errorCardTextColor, ), ), ], diff --git a/auth/lib/ui/code_widget.dart b/auth/lib/ui/code_widget.dart index 9b16d2461..7a9eae46f 100644 --- a/auth/lib/ui/code_widget.dart +++ b/auth/lib/ui/code_widget.dart @@ -12,6 +12,7 @@ import 'package:ente_auth/onboarding/view/view_qr_page.dart'; import 'package:ente_auth/services/local_authentication_service.dart'; import 'package:ente_auth/services/preference_service.dart'; import 'package:ente_auth/store/code_store.dart'; +import 'package:ente_auth/theme/ente_theme.dart'; import 'package:ente_auth/ui/code_timer_progress.dart'; import 'package:ente_auth/ui/utils/icon_utils.dart'; import 'package:ente_auth/utils/dialog_util.dart'; @@ -47,6 +48,7 @@ class _CodeWidgetState extends State { late bool _shouldShowLargeIcon; late bool _hideCode; bool isMaskingEnabled = false; + late final colorScheme = getEnteColorScheme(context); @override void initState() { @@ -205,7 +207,7 @@ class _CodeWidgetState extends State { onPressed: _onDeletePressed, backgroundColor: Colors.grey.withOpacity(0.1), borderRadius: const BorderRadius.all(Radius.circular(8)), - foregroundColor: const Color(0xFFFE4A49), + foregroundColor: colorScheme.deleteCodeTextColor, icon: Icons.delete, label: l10n.delete, padding: const EdgeInsets.only(left: 0, right: 0), @@ -228,30 +230,7 @@ class _CodeWidgetState extends State { decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), color: Theme.of(context).colorScheme.codeCardBackgroundColor, - boxShadow: widget.code.isPinned - ? [ - BoxShadow( - color: const Color(0xFF000000).withOpacity(0.03), - blurRadius: 2, - offset: const Offset(0, 7), - ), - BoxShadow( - color: const Color(0xFF000000).withOpacity(0.09), - blurRadius: 2, - offset: const Offset(0, 4), - ), - BoxShadow( - color: const Color(0xFF000000).withOpacity(0.16), - blurRadius: 1, - offset: const Offset(0, 1), - ), - BoxShadow( - color: const Color(0xFF000000).withOpacity(0.18), - blurRadius: 1, - offset: const Offset(0, 0), - ), - ] - : [], + boxShadow: widget.code.isPinned ? colorScheme.pinnedCardBoxShadow : [], ), child: ClipRRect( borderRadius: BorderRadius.circular(8), @@ -291,9 +270,7 @@ class _CodeWidgetState extends State { alignment: Alignment.topRight, child: CustomPaint( painter: PinBgPainter( - color: Theme.of(context).brightness == Brightness.dark - ? const Color(0xFF390C4F) - : const Color(0xFFF9ECFF), + color: colorScheme.pinnedBgColor, ), size: const Size(39, 39), ), diff --git a/auth/lib/ui/common/gradient_button.dart b/auth/lib/ui/common/gradient_button.dart index c909fcacc..436e1bfb9 100644 --- a/auth/lib/ui/common/gradient_button.dart +++ b/auth/lib/ui/common/gradient_button.dart @@ -1,3 +1,4 @@ +import 'package:ente_auth/theme/ente_theme.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:gradient_borders/box_borders/gradient_box_border.dart'; @@ -72,6 +73,8 @@ class _GradientButtonState extends State { ], ); } + final colorScheme = getEnteColorScheme(context); + return InkWell( onTapDown: (_) { setState(() { @@ -97,7 +100,7 @@ class _GradientButtonState extends State { width: double.infinity, decoration: BoxDecoration( borderRadius: BorderRadius.circular(widget.borderRadius), - color: const Color(0xFF531DAB), + color: colorScheme.gradientButtonBgColor, ), ), if (!isTapped) @@ -115,11 +118,8 @@ class _GradientButtonState extends State { decoration: BoxDecoration( border: GradientBoxBorder( width: widget.borderWidth, - gradient: const LinearGradient( - colors: [ - Color(0xFFB37FEB), - Color(0xFF22075E), - ], + gradient: LinearGradient( + colors: colorScheme.gradientButtonBgColors, begin: Alignment.topLeft, end: Alignment.bottomRight, ),