fix: [MDS-534] Replace Color.lerp with premul one where possible (#176)

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

@@ -213,7 +213,7 @@ class ButtonStory extends Story {
                       padding: const EdgeInsets.symmetric(horizontal: 8),
                       showTooltip: showTooltipKnob,
                       tooltipMessage: 'This is MoonTooltip',
-                      shapeDecoration: const ShapeDecoration(
+                      decoration: const ShapeDecorationWithPremultipliedAlpha(
                         image: DecorationImage(
                           image: AssetImage("assets/images/placeholder-640x359.png"),
                           fit: BoxFit.cover,
@@ -242,7 +242,7 @@ class ButtonStory extends Story {
                       padding: const EdgeInsets.symmetric(horizontal: 8),
                       showTooltip: showTooltipKnob,
                       tooltipMessage: 'This is MoonTooltip',
-                      shapeDecoration: ShapeDecoration(
+                      decoration: ShapeDecorationWithPremultipliedAlpha(
                         shadows: const [
                           BoxShadow(
                             blurRadius: 3,

lib/moon_design.dart

@@ -32,7 +32,9 @@ export 'package:moon_design/src/theme/typography/text_colors.dart';
 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/extensions.dart';
+export 'package:moon_design/src/utils/shape_decoration_premul.dart';
 export 'package:moon_design/src/utils/squircle/clip_squircle_rect.dart';
 export 'package:moon_design/src/utils/squircle/squircle_border.dart';
 export 'package:moon_design/src/utils/squircle/squircle_border_radius.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/utils/color_premul_lerp.dart';
 
 @immutable
 class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> with DiagnosticableTreeMixin {
@@ -74,12 +75,12 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
     if (other is! MoonAccordionItemColors) return this;
 
     return MoonAccordionItemColors(
-      backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!,
-      expandedBackgroundColor: Color.lerp(expandedBackgroundColor, other.expandedBackgroundColor, t)!,
-      borderColor: Color.lerp(borderColor, other.borderColor, t)!,
-      dividerColor: Color.lerp(dividerColor, other.dividerColor, t)!,
-      trailingIconColor: Color.lerp(trailingIconColor, other.trailingIconColor, t)!,
-      expandedTrailingIconColor: Color.lerp(expandedTrailingIconColor, other.expandedTrailingIconColor, t)!,
+      backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!,
+      expandedBackgroundColor: colorPremulLerp(expandedBackgroundColor, other.expandedBackgroundColor, t)!,
+      borderColor: colorPremulLerp(borderColor, other.borderColor, t)!,
+      dividerColor: colorPremulLerp(dividerColor, other.dividerColor, t)!,
+      trailingIconColor: colorPremulLerp(trailingIconColor, other.trailingIconColor, t)!,
+      expandedTrailingIconColor: colorPremulLerp(expandedTrailingIconColor, other.expandedTrailingIconColor, t)!,
     );
   }
 

lib/src/theme/alert/alert_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/utils/color_premul_lerp.dart';
 
 @immutable
 class MoonAlertColors extends ThemeExtension<MoonAlertColors> with DiagnosticableTreeMixin {
@@ -50,9 +51,9 @@ class MoonAlertColors extends ThemeExtension<MoonAlertColors> with Diagnosticabl
     if (other is! MoonAlertColors) return this;
 
     return MoonAlertColors(
-      backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!,
-      borderColor: Color.lerp(borderColor, other.borderColor, t)!,
-      outlinedVariantColor: Color.lerp(outlinedVariantColor, other.outlinedVariantColor, t)!,
+      backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!,
+      borderColor: colorPremulLerp(borderColor, other.borderColor, t)!,
+      outlinedVariantColor: colorPremulLerp(outlinedVariantColor, other.outlinedVariantColor, t)!,
     );
   }
 

lib/src/theme/authcode/authcode_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/utils/color_premul_lerp.dart';
 
 @immutable
 class MoonAuthCodeColors extends ThemeExtension<MoonAuthCodeColors> with DiagnosticableTreeMixin {
@@ -98,15 +99,15 @@ class MoonAuthCodeColors extends ThemeExtension<MoonAuthCodeColors> with Diagnos
     if (other is! MoonAuthCodeColors) return this;
 
     return MoonAuthCodeColors(
-      selectedBorderColor: Color.lerp(selectedBorderColor, other.selectedBorderColor, t)!,
-      activeBorderColor: Color.lerp(activeBorderColor, other.activeBorderColor, t)!,
-      inactiveBorderColor: Color.lerp(inactiveBorderColor, other.inactiveBorderColor, t)!,
-      errorBorderColor: Color.lerp(errorBorderColor, other.errorBorderColor, t)!,
-      selectedFillColor: Color.lerp(selectedFillColor, other.selectedFillColor, t)!,
-      activeFillColor: Color.lerp(activeFillColor, other.activeFillColor, t)!,
-      inactiveFillColor: Color.lerp(inactiveFillColor, other.inactiveFillColor, t)!,
-      disabledColor: Color.lerp(disabledColor, other.disabledColor, t)!,
-      textColor: Color.lerp(textColor, other.textColor, t)!,
+      selectedBorderColor: colorPremulLerp(selectedBorderColor, other.selectedBorderColor, t)!,
+      activeBorderColor: colorPremulLerp(activeBorderColor, other.activeBorderColor, t)!,
+      inactiveBorderColor: colorPremulLerp(inactiveBorderColor, other.inactiveBorderColor, t)!,
+      errorBorderColor: colorPremulLerp(errorBorderColor, other.errorBorderColor, t)!,
+      selectedFillColor: colorPremulLerp(selectedFillColor, other.selectedFillColor, t)!,
+      activeFillColor: colorPremulLerp(activeFillColor, other.activeFillColor, t)!,
+      inactiveFillColor: colorPremulLerp(inactiveFillColor, other.inactiveFillColor, t)!,
+      disabledColor: colorPremulLerp(disabledColor, other.disabledColor, t)!,
+      textColor: colorPremulLerp(textColor, other.textColor, t)!,
     );
   }
 

lib/src/theme/avatar/avatar_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/utils/color_premul_lerp.dart';
 
 @immutable
 class MoonAvatarColors extends ThemeExtension<MoonAvatarColors> with DiagnosticableTreeMixin {
@@ -42,8 +43,8 @@ class MoonAvatarColors extends ThemeExtension<MoonAvatarColors> with Diagnostica
     if (other is! MoonAvatarColors) return this;
 
     return MoonAvatarColors(
-      backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!,
-      badgeColor: Color.lerp(badgeColor, other.badgeColor, t)!,
+      backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!,
+      badgeColor: colorPremulLerp(badgeColor, other.badgeColor, t)!,
     );
   }
 

lib/src/theme/button/button_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/utils/color_premul_lerp.dart';
 
 @immutable
 class MoonButtonColors extends ThemeExtension<MoonButtonColors> with DiagnosticableTreeMixin {
@@ -66,11 +67,12 @@ class MoonButtonColors extends ThemeExtension<MoonButtonColors> with Diagnostica
     if (other is! MoonButtonColors) return this;
 
     return MoonButtonColors(
-      borderColor: Color.lerp(borderColor, other.borderColor, t)!,
-      filledVariantBackgroundColor: Color.lerp(filledVariantBackgroundColor, other.filledVariantBackgroundColor, t)!,
-      textVariantTextColor: Color.lerp(textVariantTextColor, other.textVariantTextColor, t)!,
-      textVariantFocusColor: Color.lerp(textVariantFocusColor, other.textVariantFocusColor, t)!,
-      textVariantHoverColor: Color.lerp(textVariantHoverColor, other.textVariantHoverColor, t)!,
+      borderColor: colorPremulLerp(borderColor, other.borderColor, t)!,
+      filledVariantBackgroundColor:
+          colorPremulLerp(filledVariantBackgroundColor, other.filledVariantBackgroundColor, t)!,
+      textVariantTextColor: colorPremulLerp(textVariantTextColor, other.textVariantTextColor, t)!,
+      textVariantFocusColor: colorPremulLerp(textVariantFocusColor, other.textVariantFocusColor, t)!,
+      textVariantHoverColor: colorPremulLerp(textVariantHoverColor, other.textVariantHoverColor, t)!,
     );
   }
 

lib/src/theme/checkbox/checkbox_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/utils/color_premul_lerp.dart';
 
 @immutable
 class MoonCheckboxColors extends ThemeExtension<MoonCheckboxColors> with DiagnosticableTreeMixin {
@@ -58,10 +59,10 @@ class MoonCheckboxColors extends ThemeExtension<MoonCheckboxColors> with Diagnos
     if (other is! MoonCheckboxColors) return this;
 
     return MoonCheckboxColors(
-      activeColor: Color.lerp(activeColor, other.activeColor, t)!,
-      borderColor: Color.lerp(borderColor, other.borderColor, t)!,
-      checkColor: Color.lerp(checkColor, other.checkColor, t)!,
-      inactiveColor: Color.lerp(inactiveColor, other.inactiveColor, t)!,
+      activeColor: colorPremulLerp(activeColor, other.activeColor, t)!,
+      borderColor: colorPremulLerp(borderColor, other.borderColor, t)!,
+      checkColor: colorPremulLerp(checkColor, other.checkColor, t)!,
+      inactiveColor: colorPremulLerp(inactiveColor, other.inactiveColor, t)!,
     );
   }
 

lib/src/theme/chip/chip_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/utils/color_premul_lerp.dart';
 
 @immutable
 class MoonChipColors extends ThemeExtension<MoonChipColors> with DiagnosticableTreeMixin {
@@ -42,8 +43,8 @@ class MoonChipColors extends ThemeExtension<MoonChipColors> with DiagnosticableT
     if (other is! MoonChipColors) return this;
 
     return MoonChipColors(
-      activeColor: Color.lerp(activeColor, other.activeColor, t)!,
-      backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!,
+      activeColor: colorPremulLerp(activeColor, other.activeColor, t)!,
+      backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!,
     );
   }
 

lib/src/theme/colors.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
+import 'package:moon_design/src/utils/color_premul_lerp.dart';
+
 @immutable
 class MoonColors extends ThemeExtension<MoonColors> with DiagnosticableTreeMixin {
   static const light = MoonColors(
@@ -340,45 +342,45 @@ class MoonColors extends ThemeExtension<MoonColors> with DiagnosticableTreeMixin
     if (other is! MoonColors) return this;
 
     return MoonColors(
-      piccolo: Color.lerp(piccolo, other.piccolo, t)!,
-      hit: Color.lerp(hit, other.hit, t)!,
-      beerus: Color.lerp(beerus, other.beerus, t)!,
-      goku: Color.lerp(goku, other.goku, t)!,
-      gohan: Color.lerp(gohan, other.gohan, t)!,
-      bulma: Color.lerp(bulma, other.bulma, t)!,
-      trunks: Color.lerp(trunks, other.trunks, t)!,
-      goten: Color.lerp(goten, other.goten, t)!,
-      popo: Color.lerp(popo, other.popo, t)!,
-      jiren: Color.lerp(jiren, other.jiren, t)!,
-      heles: Color.lerp(heles, other.heles, t)!,
-      zeno: Color.lerp(zeno, other.zeno, t)!,
-      krillin100: Color.lerp(krillin100, other.krillin100, t)!,
-      krillin60: Color.lerp(krillin60, other.krillin60, t)!,
-      krillin10: Color.lerp(krillin10, other.krillin10, t)!,
-      chiChi100: Color.lerp(chiChi100, other.chiChi100, t)!,
-      chiChi60: Color.lerp(chiChi60, other.chiChi60, t)!,
-      chiChi10: Color.lerp(chiChi10, other.chiChi10, t)!,
-      roshi100: Color.lerp(roshi100, other.roshi100, t)!,
-      roshi60: Color.lerp(roshi60, other.roshi60, t)!,
-      roshi10: Color.lerp(roshi10, other.roshi10, t)!,
-      frieza100: Color.lerp(frieza100, other.frieza100, t)!,
-      frieza60: Color.lerp(frieza60, other.frieza60, t)!,
-      frieza10: Color.lerp(frieza10, other.frieza10, t)!,
-      dodoria100: Color.lerp(dodoria100, other.dodoria100, t)!,
-      dodoria60: Color.lerp(dodoria60, other.dodoria60, t)!,
-      dodoria10: Color.lerp(dodoria10, other.dodoria10, t)!,
-      cell100: Color.lerp(cell100, other.cell100, t)!,
-      cell60: Color.lerp(cell60, other.cell60, t)!,
-      cell10: Color.lerp(cell10, other.cell10, t)!,
-      raditz100: Color.lerp(raditz100, other.raditz100, t)!,
-      raditz60: Color.lerp(raditz60, other.raditz60, t)!,
-      raditz10: Color.lerp(raditz10, other.raditz10, t)!,
-      nappa100: Color.lerp(nappa100, other.nappa100, t)!,
-      nappa60: Color.lerp(nappa60, other.nappa60, t)!,
-      nappa10: Color.lerp(nappa10, other.nappa10, t)!,
-      whis100: Color.lerp(whis100, other.whis100, t)!,
-      whis60: Color.lerp(whis60, other.whis60, t)!,
-      whis10: Color.lerp(whis10, other.whis10, t)!,
+      piccolo: colorPremulLerp(piccolo, other.piccolo, t)!,
+      hit: colorPremulLerp(hit, other.hit, t)!,
+      beerus: colorPremulLerp(beerus, other.beerus, t)!,
+      goku: colorPremulLerp(goku, other.goku, t)!,
+      gohan: colorPremulLerp(gohan, other.gohan, t)!,
+      bulma: colorPremulLerp(bulma, other.bulma, t)!,
+      trunks: colorPremulLerp(trunks, other.trunks, t)!,
+      goten: colorPremulLerp(goten, other.goten, t)!,
+      popo: colorPremulLerp(popo, other.popo, t)!,
+      jiren: colorPremulLerp(jiren, other.jiren, t)!,
+      heles: colorPremulLerp(heles, other.heles, t)!,
+      zeno: colorPremulLerp(zeno, other.zeno, t)!,
+      krillin100: colorPremulLerp(krillin100, other.krillin100, t)!,
+      krillin60: colorPremulLerp(krillin60, other.krillin60, t)!,
+      krillin10: colorPremulLerp(krillin10, other.krillin10, t)!,
+      chiChi100: colorPremulLerp(chiChi100, other.chiChi100, t)!,
+      chiChi60: colorPremulLerp(chiChi60, other.chiChi60, t)!,
+      chiChi10: colorPremulLerp(chiChi10, other.chiChi10, t)!,
+      roshi100: colorPremulLerp(roshi100, other.roshi100, t)!,
+      roshi60: colorPremulLerp(roshi60, other.roshi60, t)!,
+      roshi10: colorPremulLerp(roshi10, other.roshi10, t)!,
+      frieza100: colorPremulLerp(frieza100, other.frieza100, t)!,
+      frieza60: colorPremulLerp(frieza60, other.frieza60, t)!,
+      frieza10: colorPremulLerp(frieza10, other.frieza10, t)!,
+      dodoria100: colorPremulLerp(dodoria100, other.dodoria100, t)!,
+      dodoria60: colorPremulLerp(dodoria60, other.dodoria60, t)!,
+      dodoria10: colorPremulLerp(dodoria10, other.dodoria10, t)!,
+      cell100: colorPremulLerp(cell100, other.cell100, t)!,
+      cell60: colorPremulLerp(cell60, other.cell60, t)!,
+      cell10: colorPremulLerp(cell10, other.cell10, t)!,
+      raditz100: colorPremulLerp(raditz100, other.raditz100, t)!,
+      raditz60: colorPremulLerp(raditz60, other.raditz60, t)!,
+      raditz10: colorPremulLerp(raditz10, other.raditz10, t)!,
+      nappa100: colorPremulLerp(nappa100, other.nappa100, t)!,
+      nappa60: colorPremulLerp(nappa60, other.nappa60, t)!,
+      nappa10: colorPremulLerp(nappa10, other.nappa10, t)!,
+      whis100: colorPremulLerp(whis100, other.whis100, t)!,
+      whis60: colorPremulLerp(whis60, other.whis60, t)!,
+      whis10: colorPremulLerp(whis10, other.whis10, t)!,
     );
   }
 

lib/src/theme/effects/controls_effects.dart

@@ -4,6 +4,7 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import 'package:moon_design/src/theme/colors.dart';
+import 'package:moon_design/src/utils/color_premul_lerp.dart';
 
 @immutable
 class MoonControlsEffects extends ThemeExtension<MoonControlsEffects> with DiagnosticableTreeMixin {
@@ -65,7 +66,7 @@ class MoonControlsEffects extends ThemeExtension<MoonControlsEffects> with Diagn
     if (other is! MoonControlsEffects) return this;
 
     return MoonControlsEffects(
-      effectColor: Color.lerp(effectColor, other.effectColor, t),
+      effectColor: colorPremulLerp(effectColor, other.effectColor, t),
       effectDuration: lerpDuration(effectDuration, other.effectDuration, t),
       effectCurve: other.effectCurve,
       effectExtent: lerpDouble(effectExtent, other.effectExtent, t),

lib/src/theme/effects/focus_effects.dart

@@ -3,6 +3,8 @@ import 'dart:ui';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
+import 'package:moon_design/src/utils/color_premul_lerp.dart';
+
 @immutable
 class MoonFocusEffects extends ThemeExtension<MoonFocusEffects> with DiagnosticableTreeMixin {
   static const lightFocusEffect = MoonFocusEffects(
@@ -58,7 +60,7 @@ class MoonFocusEffects extends ThemeExtension<MoonFocusEffects> with Diagnostica
     if (other is! MoonFocusEffects) return this;
 
     return MoonFocusEffects(
-      effectColor: Color.lerp(effectColor, other.effectColor, t)!,
+      effectColor: colorPremulLerp(effectColor, other.effectColor, t)!,
       effectExtent: lerpDouble(effectExtent, other.effectExtent, t)!,
       effectDuration: lerpDuration(effectDuration, other.effectDuration, t),
       effectCurve: other.effectCurve,

lib/src/theme/effects/hover_effects.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-
 import 'package:moon_design/src/theme/colors.dart';
+import 'package:moon_design/src/utils/color_premul_lerp.dart';
 
 @immutable
 class MoonHoverEffects extends ThemeExtension<MoonHoverEffects> with DiagnosticableTreeMixin {
@@ -58,8 +58,8 @@ class MoonHoverEffects extends ThemeExtension<MoonHoverEffects> with Diagnostica
     if (other is! MoonHoverEffects) return this;
 
     return MoonHoverEffects(
-      primaryHoverColor: Color.lerp(primaryHoverColor, other.primaryHoverColor, t)!,
-      secondaryHoverColor: Color.lerp(secondaryHoverColor, other.secondaryHoverColor, t)!,
+      primaryHoverColor: colorPremulLerp(primaryHoverColor, other.primaryHoverColor, t)!,
+      secondaryHoverColor: colorPremulLerp(secondaryHoverColor, other.secondaryHoverColor, t)!,
       hoverDuration: lerpDuration(hoverDuration, other.hoverDuration, t),
       hoverCurve: other.hoverCurve,
     );

lib/src/theme/loaders/circular_loader/circular_loader_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/utils/color_premul_lerp.dart';
 
 @immutable
 class MoonCircularLoaderColors extends ThemeExtension<MoonCircularLoaderColors> with DiagnosticableTreeMixin {
@@ -42,8 +43,8 @@ class MoonCircularLoaderColors extends ThemeExtension<MoonCircularLoaderColors>
     if (other is! MoonCircularLoaderColors) return this;
 
     return MoonCircularLoaderColors(
-      color: Color.lerp(color, other.color, t)!,
-      backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!,
+      color: colorPremulLerp(color, other.color, t)!,
+      backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!,
     );
   }
 

lib/src/theme/loaders/linear_loader/linear_loader_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/utils/color_premul_lerp.dart';
 
 @immutable
 class MoonLinearLoaderColors extends ThemeExtension<MoonLinearLoaderColors> with DiagnosticableTreeMixin {
@@ -42,8 +43,8 @@ class MoonLinearLoaderColors extends ThemeExtension<MoonLinearLoaderColors> with
     if (other is! MoonLinearLoaderColors) return this;
 
     return MoonLinearLoaderColors(
-      color: Color.lerp(color, other.color, t)!,
-      backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!,
+      color: colorPremulLerp(color, other.color, t)!,
+      backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!,
     );
   }