fix: [MDS-510] Fix theme switching color being out of sync in widgets…

… - Part 1 (#178)

example/lib/src/storybook/stories/accordion.dart

@@ -26,17 +26,6 @@ class AccordionStory extends Story {
               ],
             );
 
-            final textColorsKnob = context.knobs.nullable.options(
-              label: "textColor",
-              description: "MoonColors variants for MoonAccordion text.",
-              enabled: false,
-              initial: 0,
-              // piccolo
-              options: colorOptions,
-            );
-
-            final textColor = colorTable(context)[textColorsKnob ?? 40];
-
             final iconColorsKnob = context.knobs.nullable.options(
               label: "iconColor",
               description: "MoonColors variants for MoonAccordion trailing icon.",
@@ -103,6 +92,28 @@ class AccordionStory extends Story {
 
             final dividerColor = colorTable(context)[dividerColorsKnob ?? 40];
 
+            final textColorsKnob = context.knobs.nullable.options(
+              label: "textColor",
+              description: "MoonColors variants for MoonAccordion text.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final textColor = colorTable(context)[textColorsKnob ?? 40];
+
+            final expandedTextColorsKnob = context.knobs.nullable.options(
+              label: "expandedTextColor",
+              description: "MoonColors variants for expanded MoonAccordion text.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final expandedTextColor = colorTable(context)[expandedTextColorsKnob ?? 40];
+
             final borderRadiusKnob = context.knobs.nullable.sliderInt(
               label: "borderRadius",
               description: "Border radius for MoonAccordion.",
@@ -141,6 +152,7 @@ class AccordionStory extends Story {
                       groupIdentityValue: currentlyOpenAccordionItem,
                       accordionSize: accordionSizesKnob,
                       textColor: textColor,
+                      expandedTextColor: expandedTextColor,
                       borderColor: borderColor,
                       trailingIconColor: iconColor,
                       expandedTrailingIconColor: expandedIconColor,
@@ -169,6 +181,7 @@ class AccordionStory extends Story {
                       initiallyExpanded: true,
                       accordionSize: accordionSizesKnob,
                       textColor: textColor,
+                      expandedTextColor: expandedTextColor,
                       borderColor: borderColor,
                       trailingIconColor: iconColor,
                       expandedTrailingIconColor: expandedIconColor,
@@ -198,6 +211,7 @@ class AccordionStory extends Story {
                       initiallyExpanded: true,
                       hasContentOutside: true,
                       textColor: textColor,
+                      expandedTextColor: expandedTextColor,
                       borderColor: borderColor,
                       trailingIconColor: iconColor,
                       expandedTrailingIconColor: expandedIconColor,
@@ -220,6 +234,7 @@ class AccordionStory extends Story {
                       accordionSize: accordionSizesKnob,
                       hasContentOutside: true,
                       textColor: textColor,
+                      expandedTextColor: expandedTextColor,
                       borderColor: borderColor,
                       trailingIconColor: iconColor,
                       expandedTrailingIconColor: expandedIconColor,

example/lib/src/storybook/stories/button.dart

@@ -50,6 +50,17 @@ class ButtonStory extends Story {
 
             final borderColor = colorTable(context)[borderColorsKnob ?? 40];
 
+            final textColorsKnob = context.knobs.nullable.options(
+              label: "textColor",
+              description: "MoonColors variants for MoonButton text.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final textColor = colorTable(context)[textColorsKnob ?? 40];
+
             final borderRadiusKnob = context.knobs.nullable.sliderInt(
               label: "borderRadius",
               description: "Border radius for base MoonButton.",
@@ -144,6 +155,7 @@ class ButtonStory extends Story {
                       isFullWidth: setFullWidthKnob,
                       backgroundColor: backgroundColor,
                       borderColor: borderColor,
+                      textColor: textColor,
                       showPulseEffect: showPulseEffectKnob,
                       showPulseEffectJiggle: showPulseEffectJiggleKnob,
                       leading: showLeadingKnob ? MoonIcon(resolvedIconVariant) : null,
@@ -160,6 +172,7 @@ class ButtonStory extends Story {
                       tooltipMessage: 'This is MoonTooltip',
                       buttonSize: buttonSizesKnob,
                       backgroundColor: backgroundColor,
+                      iconColor: textColor,
                       borderColor: borderColor,
                       showPulseEffect: showPulseEffectKnob,
                       showPulseEffectJiggle: showPulseEffectJiggleKnob,
@@ -213,7 +226,8 @@ class ButtonStory extends Story {
                       padding: const EdgeInsets.symmetric(horizontal: 8),
                       showTooltip: showTooltipKnob,
                       tooltipMessage: 'This is MoonTooltip',
-                      decoration: const ShapeDecorationWithPremultipliedAlpha(
+                      showFocusEffect: false,
+                      decoration: const ShapeDecoration(
                         image: DecorationImage(
                           image: AssetImage("assets/images/placeholder-640x359.png"),
                           fit: BoxFit.cover,
@@ -242,6 +256,7 @@ class ButtonStory extends Story {
                       padding: const EdgeInsets.symmetric(horizontal: 8),
                       showTooltip: showTooltipKnob,
                       tooltipMessage: 'This is MoonTooltip',
+                      showFocusEffect: false,
                       decoration: ShapeDecorationWithPremultipliedAlpha(
                         shadows: const [
                           BoxShadow(

example/lib/src/storybook/stories/chip.dart

@@ -25,17 +25,6 @@ class ChipStory extends Story {
               ],
             );
 
-            final textColorsKnob = context.knobs.nullable.options(
-              label: "textColor",
-              description: "MoonColors variants for MoonChip text.",
-              enabled: false,
-              initial: 0,
-              // piccolo
-              options: colorOptions,
-            );
-
-            final textColor = colorTable(context)[textColorsKnob ?? 40];
-
             final activeColorsKnob = context.knobs.nullable.options(
               label: "activeColor",
               description: "MoonColors variants for active MoonChip.",
@@ -58,6 +47,17 @@ class ChipStory extends Story {
 
             final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40];
 
+            final activeBackgroundColorsKnob = context.knobs.nullable.options(
+              label: "activeBackgroundColor",
+              description: "MoonColors variants for active MoonChip background.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final activeBackgroundColor = colorTable(context)[activeBackgroundColorsKnob ?? 40];
+
             final borderColorsKnob = context.knobs.nullable.options(
               label: "borderColor",
               description: "MoonColors variants for MoonChip border.",
@@ -69,6 +69,17 @@ class ChipStory extends Story {
 
             final borderColor = colorTable(context)[borderColorsKnob ?? 40];
 
+            final textColorsKnob = context.knobs.nullable.options(
+              label: "textColor",
+              description: "MoonColors variants for MoonChip text.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final textColor = colorTable(context)[textColorsKnob ?? 40];
+
             final borderRadiusKnob = context.knobs.nullable.sliderInt(
               label: "borderRadius",
               description: "Border radius for MoonChip.",
@@ -79,9 +90,8 @@ class ChipStory extends Story {
 
             final showBorderKnob = context.knobs.boolean(
               label: "showBorder",
-              description: "Show border when isActive.",
+              description: "Show border when hovered, focused or isActive is true.",
             );
-
             final isActiveKnob = context.knobs.boolean(
               label: "isActive",
               description: "Whether MoonChip is active/selected.",
@@ -116,22 +126,26 @@ class ChipStory extends Story {
                     const SizedBox(height: 32),
                     MoonChip(
                       activeColor: activeColor,
-                      textColor: textColor,
                       borderColor: borderColor,
+                      backgroundColor: backgroundColor,
+                      activeBackgroundColor: activeBackgroundColor,
+                      textColor: textColor,
                       isActive: isActiveKnob,
                       borderRadius:
                           borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
                       showBorder: showBorderKnob,
                       chipSize: chipSizesKnob,
-                      backgroundColor: backgroundColor,
                       leading: showLeadingKnob ? MoonIcon(resolvedIconVariant) : null,
                       label: showLabelKnob ? Text(customLabelTextKnob) : null,
                       trailing: showTrailingKnob ? MoonIcon(resolvedIconVariant) : null,
                     ),
                     const SizedBox(height: 40),
                     const TextDivider(text: "Text MoonChip"),
                     const SizedBox(height: 32),
-                    MoonTextChip(
+                    MoonChip.text(
+                      activeBackgroundColor: activeBackgroundColor,
+                      borderColor: borderColor,
+                      textColor: textColor,
                       isActive: isActiveKnob,
                       borderRadius:
                           borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
@@ -148,7 +162,8 @@ class ChipStory extends Story {
                       isActive: isActiveKnob,
                       activeColor: context.moonColors!.dodoria100,
                       backgroundColor: context.moonColors!.krillin100,
-                      hoverEffectColor: context.moonColors!.chiChi10,
+                      activeBackgroundColor: context.moonColors!.chiChi10,
+                      textColor: context.moonTypography!.colors.controlPrimary,
                       borderWidth: 2,
                       showBorder: showBorderKnob,
                       chipSize: chipSizesKnob,

example/lib/src/storybook/stories/tooltip.dart

@@ -159,6 +159,7 @@ class TooltipStory extends Story {
                     borderRadius: BorderRadius.circular(20),
                     backgroundColor: context.moonColors!.hit,
                     leading: const MoonIcon(MoonIcons.frame_24),
+                    textColor: context.moonTypography!.colors.controlPrimary,
                     label: const Text("MoonChip"),
                   ),
                   const SizedBox(height: 64),

lib/moon_design.dart

@@ -33,6 +33,7 @@ export 'package:moon_design/src/theme/typography/text_styles.dart';
 export 'package:moon_design/src/theme/typography/typography.dart';
 
 export 'package:moon_design/src/utils/color_premul_lerp.dart';
+export 'package:moon_design/src/utils/color_tween_premul.dart';
 export 'package:moon_design/src/utils/extensions.dart';
 export 'package:moon_design/src/utils/shape_decoration_premul.dart';
 export 'package:moon_design/src/utils/squircle/clip_squircle_rect.dart';
@@ -52,7 +53,6 @@ export 'package:moon_design/src/widgets/buttons/outlined_button.dart';
 export 'package:moon_design/src/widgets/buttons/text_button.dart';
 export 'package:moon_design/src/widgets/checkbox/checkbox.dart';
 export 'package:moon_design/src/widgets/chips/chip.dart';
-export 'package:moon_design/src/widgets/chips/text_chip.dart';
 export 'package:moon_design/src/widgets/common/animated_icon_theme.dart';
 export 'package:moon_design/src/widgets/common/base_control.dart';
 export 'package:moon_design/src/widgets/common/base_segmented_tab_bar.dart';

lib/src/theme/accordion/accordion_item_colors.dart

@@ -2,6 +2,7 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import 'package:moon_design/src/theme/colors.dart';
+import 'package:moon_design/src/theme/typography/typography.dart';
 import 'package:moon_design/src/utils/color_premul_lerp.dart';
 
 @immutable
@@ -11,17 +12,21 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
     expandedBackgroundColor: MoonColors.light.gohan,
     borderColor: MoonColors.light.beerus,
     dividerColor: MoonColors.light.beerus,
-    trailingIconColor: MoonColors.light.trunks,
-    expandedTrailingIconColor: MoonColors.light.bulma,
+    textColor: MoonTypography.light.colors.bodyPrimary,
+    expandedTextColor: MoonTypography.light.colors.bodyPrimary,
+    trailingIconColor: MoonTypography.light.colors.bodySecondary,
+    expandedTrailingIconColor: MoonTypography.light.colors.bodyPrimary,
   );
 
   static final dark = MoonAccordionItemColors(
     backgroundColor: MoonColors.dark.gohan,
     expandedBackgroundColor: MoonColors.dark.gohan,
     borderColor: MoonColors.dark.beerus,
     dividerColor: MoonColors.dark.beerus,
-    trailingIconColor: MoonColors.dark.trunks,
-    expandedTrailingIconColor: MoonColors.dark.bulma,
+    textColor: MoonTypography.dark.colors.bodyPrimary,
+    expandedTextColor: MoonTypography.dark.colors.bodyPrimary,
+    trailingIconColor: MoonTypography.dark.colors.bodySecondary,
+    expandedTrailingIconColor: MoonTypography.dark.colors.bodyPrimary,
   );
 
   /// Accordion item background color.
@@ -36,6 +41,12 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
   /// Accordion item divider color.
   final Color dividerColor;
 
+  /// Accordion item text color.
+  final Color textColor;
+
+  /// Accordion item expanded text color.
+  final Color expandedTextColor;
+
   /// Accordion item trailing icon color.
   final Color trailingIconColor;
 
@@ -47,6 +58,8 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
     required this.expandedBackgroundColor,
     required this.borderColor,
     required this.dividerColor,
+    required this.textColor,
+    required this.expandedTextColor,
     required this.trailingIconColor,
     required this.expandedTrailingIconColor,
   });
@@ -57,6 +70,8 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
     Color? expandedBackgroundColor,
     Color? borderColor,
     Color? dividerColor,
+    Color? textColor,
+    Color? expandedTextColor,
     Color? trailingIconColor,
     Color? expandedTrailingIconColor,
   }) {
@@ -65,6 +80,8 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
       expandedBackgroundColor: expandedBackgroundColor ?? this.expandedBackgroundColor,
       borderColor: borderColor ?? this.borderColor,
       dividerColor: dividerColor ?? this.dividerColor,
+      textColor: textColor ?? this.textColor,
+      expandedTextColor: expandedTextColor ?? this.expandedTextColor,
       trailingIconColor: trailingIconColor ?? this.trailingIconColor,
       expandedTrailingIconColor: expandedTrailingIconColor ?? this.expandedTrailingIconColor,
     );
@@ -79,6 +96,8 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
       expandedBackgroundColor: colorPremulLerp(expandedBackgroundColor, other.expandedBackgroundColor, t)!,
       borderColor: colorPremulLerp(borderColor, other.borderColor, t)!,
       dividerColor: colorPremulLerp(dividerColor, other.dividerColor, t)!,
+      textColor: colorPremulLerp(textColor, other.textColor, t)!,
+      expandedTextColor: colorPremulLerp(expandedTextColor, other.expandedTextColor, t)!,
       trailingIconColor: colorPremulLerp(trailingIconColor, other.trailingIconColor, t)!,
       expandedTrailingIconColor: colorPremulLerp(expandedTrailingIconColor, other.expandedTrailingIconColor, t)!,
     );
@@ -93,6 +112,8 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
       ..add(ColorProperty("expandedBackgroundColor", expandedBackgroundColor))
       ..add(ColorProperty("borderColor", borderColor))
       ..add(ColorProperty("dividerColor", dividerColor))
+      ..add(ColorProperty("textColor", textColor))
+      ..add(ColorProperty("expandedTextColor", expandedTextColor))
       ..add(ColorProperty("trailingIconColor", trailingIconColor))
       ..add(ColorProperty("expandedTrailingIconColor", expandedTrailingIconColor));
   }