fix(cat-voices): align colors with designs

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_brands/lib/src/theme_extensions/voices_color_scheme.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/themes/catalyst.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,
 );