fix(cat-voices): align colors with designs (#940)

Author: dtscalac

catalyst_voices/lib/widgets/indicators/voices_no_internet_connection_banner.dart

@@ -35,12 +35,13 @@ class NoInternetConnectionBanner extends StatelessWidget {
     return LayoutBuilder(
       builder: (context, constraints) {
         final shouldButtonDisplay = constraints.maxWidth > 744;
+        final foregroundColor = Theme.of(context).colorScheme.errorContainer;
 
         return Container(
           padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
           margin: const EdgeInsets.all(16),
           decoration: BoxDecoration(
-            color: Theme.of(context).colors.avatarsError,
+            color: Theme.of(context).colorScheme.error,
             borderRadius: BorderRadius.circular(8),
           ),
           child: Row(
@@ -56,20 +57,26 @@ class NoInternetConnectionBanner extends StatelessWidget {
                       children: [
                         CatalystSvgIcon.asset(
                           VoicesAssets.icons.wifi.path,
-                          color: Theme.of(context).colors.iconsForeground,
+                          color: foregroundColor,
                         ),
                         const SizedBox(width: 8),
                         Expanded(
                           child: Text(
                             context.l10n.noConnectionBannerTitle,
-                            style: Theme.of(context).textTheme.titleLarge,
+                            style: Theme.of(context)
+                                .textTheme
+                                .titleLarge
+                                ?.copyWith(color: foregroundColor),
                           ),
                         ),
                       ],
                     ),
                     Text(
                       context.l10n.noConnectionBannerDescription,
-                      style: Theme.of(context).textTheme.bodySmall,
+                      style: Theme.of(context)
+                          .textTheme
+                          .bodySmall
+                          ?.copyWith(color: foregroundColor),
                       softWrap: true,
                     ),
                   ],
@@ -81,7 +88,9 @@ class NoInternetConnectionBanner extends StatelessWidget {
                   onTap: onRefresh,
                   child: Text(
                     context.l10n.noConnectionBannerRefreshButtonText,
-                    style: Theme.of(context).textTheme.labelLarge,
+                    style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                          color: Theme.of(context).colors.onErrorVariant,
+                        ),
                   ),
                 ),
               ],

catalyst_voices/lib/widgets/indicators/voices_status_indicator.dart

@@ -79,6 +79,11 @@ class _StatusContainer extends StatelessWidget {
     final theme = Theme.of(context);
 
     final backgroundColor = switch (type) {
+      VoicesStatusIndicatorType.success => theme.colors.success,
+      VoicesStatusIndicatorType.error => theme.colorScheme.error,
+    };
+
+    final foregroundColor = switch (type) {
       VoicesStatusIndicatorType.success => theme.colors.successContainer,
       VoicesStatusIndicatorType.error => theme.colors.errorContainer,
     };
@@ -92,11 +97,11 @@ class _StatusContainer extends StatelessWidget {
       alignment: Alignment.center,
       child: DefaultTextStyle(
         style: (theme.textTheme.titleLarge ?? const TextStyle())
-            .copyWith(color: theme.colors.textPrimary),
+            .copyWith(color: foregroundColor),
         child: IconTheme(
           data: IconThemeData(
             size: 24,
-            color: theme.colors.textPrimary,
+            color: foregroundColor,
           ),
           child: child,
         ),

catalyst_voices/packages/catalyst_voices_assets/assets/colors/colors.xml

@@ -20,6 +20,7 @@
     <color name="light_outline_variant">#61BFC8D9</color>
     <color name="light_error">#CC0000</color>
     <color name="light_on_error">#FFFFFF</color>
+    <color name="light_on_error_variant">#FFFFFF</color>
     <color name="light_error_container">#FFD1D1</color>
     <color name="light_on_error_container">#700000</color>
     <color name="light_success">#218230</color>
@@ -87,6 +88,7 @@
     <color name="dark_outline_variant">#364463</color>
     <color name="dark_error">#FF9999</color>
     <color name="dark_on_error">#380000</color>
+    <color name="dark_on_error_variant">#FFFFFF</color>
     <color name="dark_error_container">#AD0000</color>
     <color name="dark_on_error_container">#FFD1D1</color>
     <color name="dark_success">#BAEDC2</color>

catalyst_voices/packages/catalyst_voices_assets/lib/generated/colors.gen.dart

@@ -62,6 +62,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
   final Color? primary98;
   final Color? primaryContainer;
   final Color? onPrimaryContainer;
+  final Color? onErrorVariant;
   final Color? errorContainer;
   final Color? onErrorContainer;
 
@@ -121,6 +122,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
     required this.primary98,
     required this.primaryContainer,
     required this.onPrimaryContainer,
+    required this.onErrorVariant,
     required this.errorContainer,
     required this.onErrorContainer,
   });
@@ -182,6 +184,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
     this.primary98,
     this.primaryContainer,
     this.onPrimaryContainer,
+    this.onErrorVariant,
     this.errorContainer,
     this.onErrorContainer,
   });
@@ -243,6 +246,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
     Color? primary98,
     Color? primaryContainer,
     Color? onPrimaryContainer,
+    Color? onErrorVariant,
     Color? errorContainer,
     Color? onErrorContainer,
   }) {
@@ -314,6 +318,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
       primary98: primary98 ?? this.primary98,
       primaryContainer: primaryContainer ?? this.primaryContainer,
       onPrimaryContainer: onPrimaryContainer ?? this.onPrimaryContainer,
+      onErrorVariant: onErrorVariant ?? this.onErrorVariant,
       errorContainer: errorContainer ?? this.errorContainer,
       onErrorContainer: onErrorContainer ?? this.onErrorContainer,
     );
@@ -447,6 +452,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
       primaryContainer: Color.lerp(primaryContainer, other.primaryContainer, t),
       onPrimaryContainer:
           Color.lerp(onPrimaryContainer, other.onPrimaryContainer, t),
+      onErrorVariant: Color.lerp(onErrorVariant, other.onErrorVariant, t),
       errorContainer: Color.lerp(errorContainer, other.errorContainer, t),
       onErrorContainer: Color.lerp(onErrorContainer, other.onErrorContainer, t),
     );

catalyst_voices/packages/catalyst_voices_brands/lib/src/theme_extensions/voices_color_scheme.dart

@@ -81,6 +81,7 @@ const VoicesColorScheme darkVoicesColorScheme = VoicesColorScheme(
   primary98: VoicesColors.darkPrimary98,
   primaryContainer: VoicesColors.darkPrimaryContainer,
   onPrimaryContainer: VoicesColors.darkOnPrimaryContainer,
+  onErrorVariant: VoicesColors.darkOnErrorVariant,
   errorContainer: VoicesColors.darkErrorContainer,
   onErrorContainer: VoicesColors.darkOnErrorContainer,
 );
@@ -162,6 +163,7 @@ const VoicesColorScheme lightVoicesColorScheme = VoicesColorScheme(
   primary98: VoicesColors.lightPrimary98,
   primaryContainer: VoicesColors.lightPrimaryContainer,
   onPrimaryContainer: VoicesColors.lightOnPrimaryContainer,
+  onErrorVariant: VoicesColors.lightOnErrorVariant,
   errorContainer: VoicesColors.lightErrorContainer,
   onErrorContainer: VoicesColors.lightOnErrorContainer,
 );