diff --git a/lib/widgets/login.dart b/lib/widgets/login.dart index ac0bf9a955..4027b93af0 100644 --- a/lib/widgets/login.dart +++ b/lib/widgets/login.dart @@ -18,6 +18,7 @@ import 'input.dart'; import 'page.dart'; import 'store.dart'; import 'text.dart'; +import 'theme.dart'; class _LoginSequenceRoute extends MaterialWidgetRoute { _LoginSequenceRoute({ @@ -626,16 +627,16 @@ class _UsernamePasswordFormState extends State<_UsernamePasswordForm> { } // Loosely based on the corresponding element in the web app. -// TODO(#95) need dark-theme colors class OrDivider extends StatelessWidget { const OrDivider({super.key}); @override Widget build(BuildContext context) { final zulipLocalizations = ZulipLocalizations.of(context); + final designVariables = DesignVariables.of(context); - const divider = Expanded( - child: Divider(color: Color(0xffdedede), thickness: 2)); + final divider = Expanded( + child: Divider(color: designVariables.loginOrDivider, thickness: 2)); return Padding( padding: const EdgeInsets.symmetric(vertical: 10), @@ -645,8 +646,8 @@ class OrDivider extends StatelessWidget { padding: const EdgeInsets.symmetric(horizontal: 5), child: Text(zulipLocalizations.loginMethodDivider, textAlign: TextAlign.center, - style: const TextStyle( - color: Color(0xff575757), + style: TextStyle( + color: designVariables.loginOrDividerText, height: 1.5, ).merge(weightVariableTextStyle(context, wght: 600)))), divider, diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart index ed813fae80..82093ffffa 100644 --- a/lib/widgets/theme.dart +++ b/lib/widgets/theme.dart @@ -135,6 +135,8 @@ class DesignVariables extends ThemeExtension { mainBackground: const Color(0xfff0f0f0), title: const Color(0xff1a1a1a), channelColorSwatches: ChannelColorSwatches.light, + loginOrDivider: const Color(0xffdedede), + loginOrDividerText: const Color(0xff575757), star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(), ); @@ -146,6 +148,8 @@ class DesignVariables extends ThemeExtension { mainBackground: const Color(0xff1d1d1d), title: const Color(0xffffffff), channelColorSwatches: ChannelColorSwatches.dark, + loginOrDivider: const Color(0xff424242), + loginOrDividerText: const Color(0xffa8a8a8), // TODO(#95) unchanged in dark theme? star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(), ); @@ -157,6 +161,8 @@ class DesignVariables extends ThemeExtension { required this.mainBackground, required this.title, required this.channelColorSwatches, + required this.loginOrDivider, + required this.loginOrDividerText, required this.star, }); @@ -180,6 +186,8 @@ class DesignVariables extends ThemeExtension { final ChannelColorSwatches channelColorSwatches; // Not named variables in Figma; taken from older Figma drafts, or elsewhere. + final Color loginOrDivider; // TODO(#95) need proper dark-theme color (this is ad hoc) + final Color loginOrDividerText; // TODO(#95) need proper dark-theme color (this is ad hoc) final Color star; @override @@ -190,6 +198,8 @@ class DesignVariables extends ThemeExtension { Color? mainBackground, Color? title, ChannelColorSwatches? channelColorSwatches, + Color? loginOrDivider, + Color? loginOrDividerText, Color? star, }) { return DesignVariables._( @@ -199,6 +209,8 @@ class DesignVariables extends ThemeExtension { mainBackground: mainBackground ?? this.mainBackground, title: title ?? this.title, channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches, + loginOrDivider: loginOrDivider ?? this.loginOrDivider, + loginOrDividerText: loginOrDividerText ?? this.loginOrDividerText, star: star ?? this.star, ); } @@ -215,6 +227,8 @@ class DesignVariables extends ThemeExtension { mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!, title: Color.lerp(title, other.title, t)!, channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t), + loginOrDivider: Color.lerp(loginOrDivider, other.loginOrDivider, t)!, + loginOrDividerText: Color.lerp(loginOrDividerText, other.loginOrDividerText, t)!, star: Color.lerp(star, other.star, t)!, ); }