diff --git a/example/lib/src/storybook/common/widgets/text_divider.dart b/example/lib/src/storybook/common/widgets/text_divider.dart index 59f49629..57d611ad 100644 --- a/example/lib/src/storybook/common/widgets/text_divider.dart +++ b/example/lib/src/storybook/common/widgets/text_divider.dart @@ -19,7 +19,7 @@ class TextDivider extends StatelessWidget { padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Text( text, - style: context.moonTypography!.text.text12.copyWith(color: context.moonColors!.trunks), + style: context.moonTypography?.body.text12.copyWith(color: context.moonColors?.trunks), ), ), const Expanded(child: Divider()), diff --git a/example/lib/src/storybook/common/widgets/version.dart b/example/lib/src/storybook/common/widgets/version.dart index 7b758a5e..5c50dde4 100644 --- a/example/lib/src/storybook/common/widgets/version.dart +++ b/example/lib/src/storybook/common/widgets/version.dart @@ -38,10 +38,10 @@ class _MoonVersionWidgetState extends State { const SizedBox(width: 8.0), Text( "Moon Design", - style: MoonTypography.textStyles.text.text16, + style: MoonTextStyles.heading.text16, ), const SizedBox(width: 6.0), - Text("v$_version", style: MoonTypography.textStyles.heading.text16), + Text("v$_version", style: MoonTextStyles.heading.text16), ], ), ), diff --git a/example/lib/src/storybook/stories/avatar.dart b/example/lib/src/storybook/stories/avatar.dart index 08f4980d..8a187b2b 100644 --- a/example/lib/src/storybook/stories/avatar.dart +++ b/example/lib/src/storybook/stories/avatar.dart @@ -9,6 +9,11 @@ class AvatarStory extends Story { : super( name: "Avatar", builder: (context) { + final customLabelTextKnob = context.knobs.text( + label: "Custom label text", + initial: "MD", + ); + final avatarSizesKnob = context.knobs.options( label: "avatarSize", description: "Avatar size variants.", @@ -23,16 +28,6 @@ class AvatarStory extends Story { ], ); - final setRtlModeKnob = context.knobs.boolean( - label: "RTL mode", - description: "Switch between LTR and RTL modes.", - ); - - final customLabelTextKnob = context.knobs.text( - label: "Custom label text", - initial: "MD", - ); - final avatarBackgroundColorKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for Avatar background.", @@ -42,18 +37,14 @@ class AvatarStory extends Story { final backgroundColor = colorTable(context)[avatarBackgroundColorKnob]; - final borderRadiusKnob = context.knobs.sliderInt( - max: 32, - initial: 8, - label: "borderRadius", - description: "Border radius for the Avatar.", + final badgeColorKnob = context.knobs.options( + label: "badgeColor", + description: "MoonColors variants for the Avatar badge.", + initial: 18, // roshi100 + options: colorOptions, ); - final showBadgeKnob = context.knobs.boolean( - label: "showBadge", - description: "Show Avatar badge.", - initial: true, - ); + final badgeColor = colorTable(context)[badgeColorKnob]; final avatarBadgeAlignmentKnob = context.knobs.options( label: "badgeAlignment", @@ -67,14 +58,23 @@ class AvatarStory extends Story { ], ); - final badgeColorKnob = context.knobs.options( - label: "badgeColor", - description: "MoonColors variants for the Avatar badge.", - initial: 18, // roshi100 - options: colorOptions, + final borderRadiusKnob = context.knobs.sliderInt( + max: 32, + initial: 8, + label: "borderRadius", + description: "Border radius for the Avatar.", ); - final badgeColor = colorTable(context)[badgeColorKnob]; + final showBadgeKnob = context.knobs.boolean( + label: "showBadge", + description: "Show Avatar badge.", + initial: true, + ); + + final setRtlModeKnob = context.knobs.boolean( + label: "RTL mode", + description: "Switch between LTR and RTL modes.", + ); return Directionality( textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr, diff --git a/example/lib/src/storybook/stories/button.dart b/example/lib/src/storybook/stories/button.dart index c4e22eaf..20440a32 100644 --- a/example/lib/src/storybook/stories/button.dart +++ b/example/lib/src/storybook/stories/button.dart @@ -14,6 +14,19 @@ class ButtonStory extends Story { initial: "MoonButton", ); + final buttonSizesKnob = context.knobs.options( + label: "MoonButtonSize", + description: "Button size variants.", + initial: MoonButtonSize.md, + options: const [ + Option(label: "xs", value: MoonButtonSize.xs), + Option(label: "sm", value: MoonButtonSize.sm), + Option(label: "md", value: MoonButtonSize.md), + Option(label: "lg", value: MoonButtonSize.lg), + Option(label: "xl", value: MoonButtonSize.xl) + ], + ); + final colorsKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for base MoonButton.", @@ -23,35 +36,37 @@ class ButtonStory extends Story { final color = colorTable(context)[colorsKnob]; + final borderRadiusKnob = context.knobs.sliderInt( + max: 28, + initial: 8, + label: "borderRadius", + description: "Border radius for base MoonButton.", + ); + final showBorderKnob = context.knobs.boolean( label: "showBorder", description: "Show border for base MoonButton.", initial: true, ); - final borderRadiusKnob = context.knobs.sliderInt( - max: 28, - initial: 8, - label: "borderRadius", - description: "Border radius for base MoonButton.", + final showDisabledKnob = context.knobs.boolean( + label: "Disabled", + description: "onTap() or onLongPress() is null.", ); - final buttonSizesKnob = context.knobs.options( - label: "MoonButtonSize", - description: "Button size variants.", - initial: MoonButtonSize.md, - options: const [ - Option(label: "xs", value: MoonButtonSize.xs), - Option(label: "sm", value: MoonButtonSize.sm), - Option(label: "md", value: MoonButtonSize.md), - Option(label: "lg", value: MoonButtonSize.lg), - Option(label: "xl", value: MoonButtonSize.xl) - ], + final setFullWidthKnob = context.knobs.boolean( + label: "isFullWidth", + description: "Set Button to full width.", ); - final setRtlModeKnob = context.knobs.boolean( - label: "RTL mode", - description: "Switch between LTR and RTL modes.", + final showPulseEffectKnob = context.knobs.boolean( + label: "showPulseEffect", + description: "Show pulse animation.", + ); + + final showPulseEffectJiggleKnob = context.knobs.boolean( + label: "showPulseEffectJiggle", + description: "Show jiggling with pulse animation.", ); final showLeftIconKnob = context.knobs.boolean( @@ -71,24 +86,9 @@ class ButtonStory extends Story { description: "Show widget in the rightIcon slot.", ); - final showPulseEffectKnob = context.knobs.boolean( - label: "showPulseEffect", - description: "Show pulse animation.", - ); - - final showPulseEffectJiggleKnob = context.knobs.boolean( - label: "showPulseEffectJiggle", - description: "Show jiggling with pulse animation.", - ); - - final showDisabledKnob = context.knobs.boolean( - label: "Disabled", - description: "onTap() or onLongPress() is null.", - ); - - final setFullWidthKnob = context.knobs.boolean( - label: "isFullWidth", - description: "Set Button to full width.", + final setRtlModeKnob = context.knobs.boolean( + label: "RTL mode", + description: "Switch between LTR and RTL modes.", ); IconData resolveIconVariant(MoonButtonSize buttonSize) { diff --git a/example/lib/src/storybook/stories/chip.dart b/example/lib/src/storybook/stories/chip.dart index b993b650..56e2f47a 100644 --- a/example/lib/src/storybook/stories/chip.dart +++ b/example/lib/src/storybook/stories/chip.dart @@ -14,6 +14,16 @@ class ChipStory extends Story { initial: "MoonChip", ); + final chipSizesKnob = context.knobs.options( + label: "MoonChipSize", + description: "Chip size variants.", + initial: MoonChipSize.md, + options: const [ + Option(label: "sm", value: MoonChipSize.sm), + Option(label: "md", value: MoonChipSize.md), + ], + ); + final colorsKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for the Chip.", @@ -23,16 +33,6 @@ class ChipStory extends Story { final color = colorTable(context)[colorsKnob]; - final isActiveKnob = context.knobs.boolean( - label: "isActive", - description: "Whether the Chip is active/selected.", - ); - - final showBorderKnob = context.knobs.boolean( - label: "showBorder", - description: "Show border when isActive.", - ); - final borderRadiusKnob = context.knobs.sliderInt( max: 28, initial: 8, @@ -40,19 +40,14 @@ class ChipStory extends Story { description: "Border radius for the Chip.", ); - final chipSizesKnob = context.knobs.options( - label: "MoonChipSize", - description: "Chip size variants.", - initial: MoonChipSize.md, - options: const [ - Option(label: "sm", value: MoonChipSize.sm), - Option(label: "md", value: MoonChipSize.md), - ], + final showBorderKnob = context.knobs.boolean( + label: "showBorder", + description: "Show border when isActive.", ); - final setRtlModeKnob = context.knobs.boolean( - label: "RTL mode", - description: "Switch between LTR and RTL modes.", + final isActiveKnob = context.knobs.boolean( + label: "isActive", + description: "Whether the Chip is active/selected.", ); final showLeftIconKnob = context.knobs.boolean( @@ -72,6 +67,11 @@ class ChipStory extends Story { description: "Show widget in the rightIcon slot.", ); + final setRtlModeKnob = context.knobs.boolean( + label: "RTL mode", + description: "Switch between LTR and RTL modes.", + ); + final resolvedIconVariant = chipSizesKnob == MoonChipSize.md ? MoonIconsOther.frame24 : MoonIconsOther.frame16; diff --git a/example/lib/src/storybook/stories/tag.dart b/example/lib/src/storybook/stories/tag.dart index 48fc0cce..91b208e9 100644 --- a/example/lib/src/storybook/stories/tag.dart +++ b/example/lib/src/storybook/stories/tag.dart @@ -13,6 +13,16 @@ class TagStory extends Story { initial: "MoonTag", ); + final tagSizesKnob = context.knobs.options( + label: "tagSize", + description: "Tag size variants.", + initial: MoonTagSize.xs, + options: const [ + Option(label: "x2s", value: MoonTagSize.x2s), + Option(label: "xs", value: MoonTagSize.xs), + ], + ); + final colorsKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for Tag.", @@ -29,21 +39,6 @@ class TagStory extends Story { description: "Border radius for Tag.", ); - final tagSizesKnob = context.knobs.options( - label: "tagSize", - description: "Tag size variants.", - initial: MoonTagSize.xs, - options: const [ - Option(label: "x2s", value: MoonTagSize.x2s), - Option(label: "xs", value: MoonTagSize.xs), - ], - ); - - final setRtlModeKnob = context.knobs.boolean( - label: "RTL mode", - description: "Switch between LTR and RTL modes.", - ); - final setUpperCase = context.knobs.boolean( label: "isUpperCase", description: "Sets the text style of the Tag to upper case.", @@ -60,8 +55,16 @@ class TagStory extends Story { initial: true, ); - final showRightIconKnob = context.knobs - .boolean(label: "Show rightIcon", description: "Show widget in the rightIcon slot.", initial: true); + final showRightIconKnob = context.knobs.boolean( + label: "Show rightIcon", + description: "Show widget in the rightIcon slot.", + initial: true, + ); + + final setRtlModeKnob = context.knobs.boolean( + label: "RTL mode", + description: "Switch between LTR and RTL modes.", + ); return Directionality( textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr, diff --git a/lib/moon_design.dart b/lib/moon_design.dart index b4e3b462..cc29680a 100644 --- a/lib/moon_design.dart +++ b/lib/moon_design.dart @@ -1,34 +1,24 @@ library moon_design; -export 'package:moon_design/src/theme/avatar/avatar_sizes.dart'; export 'package:moon_design/src/theme/avatar/avatar_theme.dart'; export 'package:moon_design/src/theme/borders.dart'; -export 'package:moon_design/src/theme/button/button_sizes.dart'; export 'package:moon_design/src/theme/button/button_theme.dart'; -export 'package:moon_design/src/theme/chip/chip_sizes.dart'; export 'package:moon_design/src/theme/chip/chip_theme.dart'; export 'package:moon_design/src/theme/colors.dart'; -export 'package:moon_design/src/theme/effects/controls_effects.dart'; export 'package:moon_design/src/theme/effects/effects.dart'; -export 'package:moon_design/src/theme/effects/focus_effects.dart'; -export 'package:moon_design/src/theme/effects/hover_effects.dart'; -export 'package:moon_design/src/theme/loaders/circular_loader_sizes.dart'; -export 'package:moon_design/src/theme/loaders/circular_loader_theme.dart'; -export 'package:moon_design/src/theme/loaders/linear_loader_sizes.dart'; -export 'package:moon_design/src/theme/loaders/linear_loader_theme.dart'; +export 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_theme.dart'; +export 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_theme.dart'; export 'package:moon_design/src/theme/opacity.dart'; -export 'package:moon_design/src/theme/progress/circular_progress_sizes.dart'; -export 'package:moon_design/src/theme/progress/circular_progress_theme.dart'; -export 'package:moon_design/src/theme/progress/linear_progress_sizes.dart'; -export 'package:moon_design/src/theme/progress/linear_progress_theme.dart'; +export 'package:moon_design/src/theme/progress/circular_progress/circular_progress_theme.dart'; +export 'package:moon_design/src/theme/progress/linear_progress/linear_progress_theme.dart'; export 'package:moon_design/src/theme/shadows.dart'; export 'package:moon_design/src/theme/sizes.dart'; export 'package:moon_design/src/theme/theme.dart'; -export 'package:moon_design/src/theme/tooltip/tooltip.dart'; +export 'package:moon_design/src/theme/tooltip/tooltip_properties.dart'; +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/animated_icon_theme.dart'; export 'package:moon_design/src/utils/extensions.dart'; export 'package:moon_design/src/utils/measure_size.dart'; export 'package:moon_design/src/utils/widget_surveyor.dart'; @@ -41,12 +31,13 @@ export 'package:moon_design/src/widgets/buttons/secondary_button.dart'; export 'package:moon_design/src/widgets/buttons/tertiary_button.dart'; export 'package:moon_design/src/widgets/chips/chip.dart'; export 'package:moon_design/src/widgets/chips/ghost_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/icons.dart'; +export 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; +export 'package:moon_design/src/widgets/common/effects/pulse_effect.dart'; +export 'package:moon_design/src/widgets/common/icons/icons.dart'; export 'package:moon_design/src/widgets/common/progress_indicators/circular_progress_indicator.dart'; export 'package:moon_design/src/widgets/common/progress_indicators/linear_progress_indicator.dart'; -export 'package:moon_design/src/widgets/effects/focus_effect.dart'; -export 'package:moon_design/src/widgets/effects/pulse_effect.dart'; export 'package:moon_design/src/widgets/loaders/circular_loader.dart'; export 'package:moon_design/src/widgets/loaders/linear_loader.dart'; export 'package:moon_design/src/widgets/progress/circular_progress.dart'; diff --git a/lib/src/theme/avatar/avatar_colors.dart b/lib/src/theme/avatar/avatar_colors.dart new file mode 100644 index 00000000..35fca1cb --- /dev/null +++ b/lib/src/theme/avatar/avatar_colors.dart @@ -0,0 +1,58 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/colors.dart'; + +@immutable +class MoonAvatarColors extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonAvatarColors( + backgroundColor: MoonColors.light.gohan, + badgeColor: MoonColors.light.roshi100, + ); + + static final dark = MoonAvatarColors( + backgroundColor: MoonColors.dark.gohan, + badgeColor: MoonColors.dark.roshi100, + ); + + /// Avatar background color. + final Color backgroundColor; + + /// Avatar badge color. + final Color badgeColor; + + const MoonAvatarColors({ + required this.backgroundColor, + required this.badgeColor, + }); + + @override + MoonAvatarColors copyWith({ + Color? backgroundColor, + Color? badgeColor, + }) { + return MoonAvatarColors( + backgroundColor: backgroundColor ?? this.backgroundColor, + badgeColor: badgeColor ?? this.badgeColor, + ); + } + + @override + MoonAvatarColors lerp(ThemeExtension? other, double t) { + if (other is! MoonAvatarColors) return this; + + return MoonAvatarColors( + backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!, + badgeColor: Color.lerp(badgeColor, other.badgeColor, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonAvatarColors")) + ..add(ColorProperty("backgroundColor", backgroundColor)) + ..add(ColorProperty("badgeColor", badgeColor)); + } +} diff --git a/lib/src/theme/avatar/avatar_size_properties.dart b/lib/src/theme/avatar/avatar_size_properties.dart new file mode 100644 index 00000000..0a36029e --- /dev/null +++ b/lib/src/theme/avatar/avatar_size_properties.dart @@ -0,0 +1,127 @@ +import 'dart:ui'; + +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/borders.dart'; +import 'package:moon_design/src/theme/sizes.dart'; +import 'package:moon_design/src/theme/typography/text_styles.dart'; + +@immutable +class MoonAvatarSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { + static final _badgeToAvatarRatio = MoonSizes.sizes.x3s / MoonSizes.sizes.x2l; + static final _badgeMarginValueToAvatarRatio = MoonSizes.sizes.x5s / MoonSizes.sizes.x2l; + + static final xs = MoonAvatarSizeProperties( + avatarSizeValue: MoonSizes.sizes.xs, + badgeSizeValue: MoonSizes.sizes.xs * _badgeToAvatarRatio, + badgeMarginValue: MoonSizes.sizes.xs * _badgeMarginValueToAvatarRatio, + borderRadius: MoonBorders.borders.interactiveXs, + textStyle: MoonTextStyles.heading.text10, + ); + + static final sm = MoonAvatarSizeProperties( + avatarSizeValue: MoonSizes.sizes.sm, + badgeSizeValue: MoonSizes.sizes.sm * _badgeToAvatarRatio, + badgeMarginValue: MoonSizes.sizes.sm * _badgeMarginValueToAvatarRatio, + borderRadius: MoonBorders.borders.interactiveSm, + textStyle: MoonTextStyles.heading.text12, + ); + + static final md = MoonAvatarSizeProperties( + avatarSizeValue: MoonSizes.sizes.md, + badgeSizeValue: MoonSizes.sizes.md * _badgeToAvatarRatio, + badgeMarginValue: MoonSizes.sizes.md * _badgeMarginValueToAvatarRatio, + borderRadius: MoonBorders.borders.interactiveSm, + textStyle: MoonTextStyles.heading.text14, + ); + + static final lg = MoonAvatarSizeProperties( + avatarSizeValue: MoonSizes.sizes.lg, + badgeSizeValue: MoonSizes.sizes.lg * _badgeToAvatarRatio, + badgeMarginValue: MoonSizes.sizes.lg * _badgeMarginValueToAvatarRatio, + borderRadius: MoonBorders.borders.interactiveSm, + textStyle: MoonTextStyles.heading.text16, + ); + + static final xl = MoonAvatarSizeProperties( + avatarSizeValue: MoonSizes.sizes.xl, + badgeSizeValue: MoonSizes.sizes.xl * _badgeToAvatarRatio, + badgeMarginValue: MoonSizes.sizes.xl * _badgeMarginValueToAvatarRatio, + borderRadius: MoonBorders.borders.interactiveMd, + textStyle: MoonTextStyles.heading.text16, + ); + + static final x2l = MoonAvatarSizeProperties( + avatarSizeValue: MoonSizes.sizes.x2l, + badgeSizeValue: MoonSizes.sizes.x2l * _badgeToAvatarRatio, + badgeMarginValue: MoonSizes.sizes.x2l * _badgeMarginValueToAvatarRatio, + borderRadius: MoonBorders.borders.interactiveMd, + textStyle: MoonTextStyles.heading.text20, + ); + + /// Avatar size value. + final double avatarSizeValue; + + /// Avatar badge size value. + final double badgeSizeValue; + + /// Avatar badge margin value. + final double badgeMarginValue; + + /// Avatar border radius. + final BorderRadius borderRadius; + + /// Avatar text style. + final TextStyle textStyle; + + const MoonAvatarSizeProperties({ + required this.avatarSizeValue, + required this.badgeSizeValue, + required this.badgeMarginValue, + required this.borderRadius, + required this.textStyle, + }); + + @override + MoonAvatarSizeProperties copyWith({ + double? avatarSizeValue, + double? badgeSizeValue, + double? badgeMarginValue, + BorderRadius? borderRadius, + TextStyle? textStyle, + }) { + return MoonAvatarSizeProperties( + avatarSizeValue: avatarSizeValue ?? this.avatarSizeValue, + badgeSizeValue: badgeSizeValue ?? this.badgeSizeValue, + badgeMarginValue: badgeMarginValue ?? this.badgeMarginValue, + borderRadius: borderRadius ?? this.borderRadius, + textStyle: textStyle ?? this.textStyle, + ); + } + + @override + MoonAvatarSizeProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonAvatarSizeProperties) return this; + + return MoonAvatarSizeProperties( + avatarSizeValue: lerpDouble(avatarSizeValue, other.avatarSizeValue, t)!, + badgeSizeValue: lerpDouble(badgeSizeValue, other.badgeSizeValue, t)!, + badgeMarginValue: lerpDouble(badgeMarginValue, other.badgeMarginValue, t)!, + borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, + textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonAvatarSizeProperties")) + ..add(DoubleProperty("avatarSizeValue", avatarSizeValue)) + ..add(DoubleProperty("badgeSizeValue", badgeSizeValue)) + ..add(DoubleProperty("badgeMarginValue", badgeMarginValue)) + ..add(DiagnosticsProperty("borderRadius", borderRadius)) + ..add(DiagnosticsProperty("textStyle", textStyle)); + } +} diff --git a/lib/src/theme/avatar/avatar_sizes.dart b/lib/src/theme/avatar/avatar_sizes.dart index 63937342..a8bc6f73 100644 --- a/lib/src/theme/avatar/avatar_sizes.dart +++ b/lib/src/theme/avatar/avatar_sizes.dart @@ -1,102 +1,62 @@ -import 'dart:ui'; - import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; +import 'package:moon_design/src/theme/avatar/avatar_size_properties.dart'; @immutable class MoonAvatarSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final _badgeToAvatarRatio = MoonSizes.sizes.x3s / MoonSizes.sizes.x2l; - static final _badgeMarginValueToAvatarRatio = MoonSizes.sizes.x5s / MoonSizes.sizes.x2l; - - static final xs = MoonAvatarSizes( - avatarSizeValue: MoonSizes.sizes.xs, - badgeSizeValue: MoonSizes.sizes.xs * _badgeToAvatarRatio, - badgeMarginValue: MoonSizes.sizes.xs * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveXs, - textStyle: MoonTextStyles.heading.text10, - ); - - static final sm = MoonAvatarSizes( - avatarSizeValue: MoonSizes.sizes.sm, - badgeSizeValue: MoonSizes.sizes.sm * _badgeToAvatarRatio, - badgeMarginValue: MoonSizes.sizes.sm * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveSm, - textStyle: MoonTextStyles.heading.text12, - ); - - static final md = MoonAvatarSizes( - avatarSizeValue: MoonSizes.sizes.md, - badgeSizeValue: MoonSizes.sizes.md * _badgeToAvatarRatio, - badgeMarginValue: MoonSizes.sizes.md * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveSm, - textStyle: MoonTextStyles.heading.text14, + static final sizes = MoonAvatarSizes( + xs: MoonAvatarSizeProperties.xs, + sm: MoonAvatarSizeProperties.sm, + md: MoonAvatarSizeProperties.md, + lg: MoonAvatarSizeProperties.lg, + xl: MoonAvatarSizeProperties.xl, + x2l: MoonAvatarSizeProperties.x2l, ); - static final lg = MoonAvatarSizes( - avatarSizeValue: MoonSizes.sizes.lg, - badgeSizeValue: MoonSizes.sizes.lg * _badgeToAvatarRatio, - badgeMarginValue: MoonSizes.sizes.lg * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveSm, - textStyle: MoonTextStyles.heading.text16, - ); - - static final xl = MoonAvatarSizes( - avatarSizeValue: MoonSizes.sizes.xl, - badgeSizeValue: MoonSizes.sizes.xl * _badgeToAvatarRatio, - badgeMarginValue: MoonSizes.sizes.xl * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveMd, - textStyle: MoonTextStyles.heading.text16, - ); - - static final x2l = MoonAvatarSizes( - avatarSizeValue: MoonSizes.sizes.x2l, - badgeSizeValue: MoonSizes.sizes.x2l * _badgeToAvatarRatio, - badgeMarginValue: MoonSizes.sizes.x2l * _badgeMarginValueToAvatarRatio, - borderRadius: MoonBorders.borders.interactiveMd, - textStyle: MoonTextStyles.heading.text20, - ); + /// Extra small avatar properties. + final MoonAvatarSizeProperties xs; - /// Avatar size value. - final double avatarSizeValue; + /// Small avatar properties. + final MoonAvatarSizeProperties sm; - /// Avatar badge size value. - final double badgeSizeValue; + /// Medium avatar properties. + final MoonAvatarSizeProperties md; - /// Avatar badge margin value. - final double badgeMarginValue; + /// Large avatar properties. + final MoonAvatarSizeProperties lg; - /// Avatar border radius. - final BorderRadius borderRadius; + /// Extra large avatar properties. + final MoonAvatarSizeProperties xl; - /// Avatar text style. - final TextStyle textStyle; + /// (2x) Extra large avatar properties. + final MoonAvatarSizeProperties x2l; const MoonAvatarSizes({ - required this.avatarSizeValue, - required this.badgeSizeValue, - required this.badgeMarginValue, - required this.borderRadius, - required this.textStyle, + required this.xs, + required this.sm, + required this.md, + required this.lg, + required this.xl, + required this.x2l, }); @override MoonAvatarSizes copyWith({ - double? avatarSizeValue, - double? badgeSizeValue, - double? badgeMarginValue, - BorderRadius? borderRadius, - TextStyle? textStyle, + MoonAvatarSizeProperties? xs, + MoonAvatarSizeProperties? sm, + MoonAvatarSizeProperties? md, + MoonAvatarSizeProperties? lg, + MoonAvatarSizeProperties? xl, + MoonAvatarSizeProperties? x2l, }) { return MoonAvatarSizes( - avatarSizeValue: avatarSizeValue ?? this.avatarSizeValue, - badgeSizeValue: badgeSizeValue ?? this.badgeSizeValue, - badgeMarginValue: badgeMarginValue ?? this.badgeMarginValue, - borderRadius: borderRadius ?? this.borderRadius, - textStyle: textStyle ?? this.textStyle, + xs: xs ?? this.xs, + sm: sm ?? this.sm, + md: md ?? this.md, + lg: lg ?? this.lg, + xl: xl ?? this.xl, + x2l: x2l ?? this.x2l, ); } @@ -105,11 +65,12 @@ class MoonAvatarSizes extends ThemeExtension with Diagnosticabl if (other is! MoonAvatarSizes) return this; return MoonAvatarSizes( - avatarSizeValue: lerpDouble(avatarSizeValue, other.avatarSizeValue, t)!, - badgeSizeValue: lerpDouble(badgeSizeValue, other.badgeSizeValue, t)!, - badgeMarginValue: lerpDouble(badgeMarginValue, other.badgeMarginValue, t)!, - borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, - textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, + xs: xs.lerp(other.xs, t), + sm: sm.lerp(other.sm, t), + md: md.lerp(other.md, t), + lg: lg.lerp(other.lg, t), + xl: xl.lerp(other.xl, t), + x2l: x2l.lerp(other.x2l, t), ); } @@ -118,10 +79,11 @@ class MoonAvatarSizes extends ThemeExtension with Diagnosticabl super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAvatarSizes")) - ..add(DoubleProperty("avatarSizeValue", avatarSizeValue)) - ..add(DoubleProperty("badgeSizeValue", badgeSizeValue)) - ..add(DoubleProperty("badgeMarginValue", badgeMarginValue)) - ..add(DiagnosticsProperty("borderRadius", borderRadius)) - ..add(DiagnosticsProperty("textStyle", textStyle)); + ..add(DiagnosticsProperty("xs", xs)) + ..add(DiagnosticsProperty("sm", sm)) + ..add(DiagnosticsProperty("md", md)) + ..add(DiagnosticsProperty("lg", lg)) + ..add(DiagnosticsProperty("xl", xl)) + ..add(DiagnosticsProperty("x2l", x2l)); } } diff --git a/lib/src/theme/avatar/avatar_theme.dart b/lib/src/theme/avatar/avatar_theme.dart index e911ae14..dd0117dc 100644 --- a/lib/src/theme/avatar/avatar_theme.dart +++ b/lib/src/theme/avatar/avatar_theme.dart @@ -1,62 +1,40 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; +import 'package:moon_design/src/theme/avatar/avatar_colors.dart'; import 'package:moon_design/src/theme/avatar/avatar_sizes.dart'; @immutable class MoonAvatarTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonAvatarTheme( - xs: MoonAvatarSizes.xs, - sm: MoonAvatarSizes.sm, - md: MoonAvatarSizes.md, - lg: MoonAvatarSizes.lg, - xl: MoonAvatarSizes.xl, - x2l: MoonAvatarSizes.x2l, + static final light = MoonAvatarTheme( + colors: MoonAvatarColors.light, + sizes: MoonAvatarSizes.sizes, ); - /// Extra small avatar properties. - final MoonAvatarSizes xs; - - /// Small avatar properties. - final MoonAvatarSizes sm; - - /// Medium avatar properties. - final MoonAvatarSizes md; - - /// Large avatar properties. - final MoonAvatarSizes lg; + static final dark = MoonAvatarTheme( + colors: MoonAvatarColors.dark, + sizes: MoonAvatarSizes.sizes, + ); - /// Extra large avatar properties. - final MoonAvatarSizes xl; + /// Avatar colors. + final MoonAvatarColors colors; - /// (2x) Extra large avatar properties. - final MoonAvatarSizes x2l; + /// Avatar sizes. + final MoonAvatarSizes sizes; const MoonAvatarTheme({ - required this.xs, - required this.sm, - required this.md, - required this.lg, - required this.xl, - required this.x2l, + required this.colors, + required this.sizes, }); @override MoonAvatarTheme copyWith({ - MoonAvatarSizes? xs, - MoonAvatarSizes? sm, - MoonAvatarSizes? md, - MoonAvatarSizes? lg, - MoonAvatarSizes? xl, - MoonAvatarSizes? x2l, + MoonAvatarColors? colors, + MoonAvatarSizes? sizes, }) { return MoonAvatarTheme( - xs: xs ?? this.xs, - sm: sm ?? this.sm, - md: md ?? this.md, - lg: lg ?? this.lg, - xl: xl ?? this.xl, - x2l: x2l ?? this.x2l, + colors: colors ?? this.colors, + sizes: sizes ?? this.sizes, ); } @@ -65,12 +43,8 @@ class MoonAvatarTheme extends ThemeExtension with Diagnosticabl if (other is! MoonAvatarTheme) return this; return MoonAvatarTheme( - xs: xs.lerp(other.xs, t), - sm: sm.lerp(other.sm, t), - md: md.lerp(other.md, t), - lg: lg.lerp(other.lg, t), - xl: xl.lerp(other.xl, t), - x2l: x2l.lerp(other.x2l, t), + colors: colors.lerp(other.colors, t), + sizes: sizes.lerp(other.sizes, t), ); } @@ -79,11 +53,7 @@ class MoonAvatarTheme extends ThemeExtension with Diagnosticabl super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAvatarTheme")) - ..add(DiagnosticsProperty("xs", xs)) - ..add(DiagnosticsProperty("sm", sm)) - ..add(DiagnosticsProperty("md", md)) - ..add(DiagnosticsProperty("lg", lg)) - ..add(DiagnosticsProperty("xl", xl)) - ..add(DiagnosticsProperty("x2l", x2l)); + ..add(DiagnosticsProperty("colors", colors)) + ..add(DiagnosticsProperty("sizes", sizes)); } } diff --git a/lib/src/theme/button/button_colors.dart b/lib/src/theme/button/button_colors.dart new file mode 100644 index 00000000..5a37ac50 --- /dev/null +++ b/lib/src/theme/button/button_colors.dart @@ -0,0 +1,97 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import 'package:moon_design/src/theme/colors.dart'; + +@immutable +class MoonButtonColors extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonButtonColors( + borderColor: MoonColors.light.trunks, + primaryBackgroundColor: MoonColors.light.piccolo, + tertiaryBackgroundColor: MoonColors.light.hit, + ghostTextColor: MoonColors.light.trunks, + ghostFocusColor: MoonColors.light.piccolo, + ghostHoverColor: MoonColors.light.jiren, + ); + + static final dark = MoonButtonColors( + borderColor: MoonColors.dark.trunks, + primaryBackgroundColor: MoonColors.dark.piccolo, + tertiaryBackgroundColor: MoonColors.dark.hit, + ghostTextColor: MoonColors.dark.trunks, + ghostFocusColor: MoonColors.dark.piccolo, + ghostHoverColor: MoonColors.dark.jiren, + ); + + /// Button border color. + final Color borderColor; + + /// Primary button background color. + final Color primaryBackgroundColor; + + /// Tertiary button background color. + final Color tertiaryBackgroundColor; + + /// Ghost button text color. + final Color ghostTextColor; + + /// Ghost button focus effect color. + final Color ghostFocusColor; + + /// Ghost button hover effect color. + final Color ghostHoverColor; + + const MoonButtonColors({ + required this.borderColor, + required this.primaryBackgroundColor, + required this.tertiaryBackgroundColor, + required this.ghostTextColor, + required this.ghostFocusColor, + required this.ghostHoverColor, + }); + + @override + MoonButtonColors copyWith({ + Color? borderColor, + Color? primaryBackgroundColor, + Color? tertiaryBackgroundColor, + Color? ghostTextColor, + Color? ghostFocusColor, + Color? ghostHoverColor, + }) { + return MoonButtonColors( + borderColor: borderColor ?? this.borderColor, + primaryBackgroundColor: primaryBackgroundColor ?? this.primaryBackgroundColor, + tertiaryBackgroundColor: tertiaryBackgroundColor ?? this.tertiaryBackgroundColor, + ghostTextColor: ghostTextColor ?? this.ghostTextColor, + ghostFocusColor: ghostFocusColor ?? this.ghostFocusColor, + ghostHoverColor: ghostHoverColor ?? this.ghostHoverColor, + ); + } + + @override + MoonButtonColors lerp(ThemeExtension? other, double t) { + if (other is! MoonButtonColors) return this; + + return MoonButtonColors( + borderColor: Color.lerp(borderColor, other.borderColor, t)!, + primaryBackgroundColor: Color.lerp(primaryBackgroundColor, other.primaryBackgroundColor, t)!, + tertiaryBackgroundColor: Color.lerp(tertiaryBackgroundColor, other.tertiaryBackgroundColor, t)!, + ghostTextColor: Color.lerp(ghostTextColor, other.ghostTextColor, t)!, + ghostFocusColor: Color.lerp(ghostFocusColor, other.ghostFocusColor, t)!, + ghostHoverColor: Color.lerp(ghostHoverColor, other.ghostHoverColor, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonButtonColors")) + ..add(ColorProperty("borderColor", borderColor)) + ..add(ColorProperty("primaryBackgroundColor", primaryBackgroundColor)) + ..add(ColorProperty("tertiaryBackgroundColor", tertiaryBackgroundColor)) + ..add(ColorProperty("ghostTextColor", ghostTextColor)) + ..add(ColorProperty("ghostFocusColor", ghostFocusColor)) + ..add(ColorProperty("ghostHoverColor", ghostHoverColor)); + } +} diff --git a/lib/src/theme/button/button_size_properties.dart b/lib/src/theme/button/button_size_properties.dart new file mode 100644 index 00000000..969d3196 --- /dev/null +++ b/lib/src/theme/button/button_size_properties.dart @@ -0,0 +1,129 @@ +import 'dart:ui'; + +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/borders.dart'; +import 'package:moon_design/src/theme/sizes.dart'; +import 'package:moon_design/src/theme/typography/text_styles.dart'; + +@immutable +class MoonButtonSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { + static final xs = MoonButtonSizeProperties( + height: MoonSizes.sizes.xs, + gap: MoonSizes.sizes.x5s, + iconSizeValue: MoonSizes.sizes.x2s, + padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), + borderRadius: MoonBorders.borders.interactiveXs, + textStyle: MoonTextStyles.heading.text12, + ); + + static final sm = MoonButtonSizeProperties( + height: MoonSizes.sizes.sm, + gap: MoonSizes.sizes.x5s, + iconSizeValue: MoonSizes.sizes.xs, + padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), + borderRadius: MoonBorders.borders.interactiveSm, + textStyle: MoonTextStyles.heading.text14, + ); + + static final md = MoonButtonSizeProperties( + height: MoonSizes.sizes.md, + gap: MoonSizes.sizes.x4s, + iconSizeValue: MoonSizes.sizes.xs, + padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), + borderRadius: MoonBorders.borders.interactiveSm, + textStyle: MoonTextStyles.heading.text14, + ); + + static final lg = MoonButtonSizeProperties( + height: MoonSizes.sizes.lg, + gap: MoonSizes.sizes.x3s, + iconSizeValue: MoonSizes.sizes.xs, + padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), + borderRadius: MoonBorders.borders.interactiveSm, + textStyle: MoonTextStyles.heading.text16, + ); + + static final xl = MoonButtonSizeProperties( + height: MoonSizes.sizes.xl, + gap: MoonSizes.sizes.x2s, + iconSizeValue: MoonSizes.sizes.xs, + padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.xs), + borderRadius: MoonBorders.borders.interactiveMd, + textStyle: MoonTextStyles.heading.text16, + ); + + /// Button height. + final double height; + + /// Space between button children. + final double gap; + + /// Button icon size value. + final double iconSizeValue; + + /// Padding around button children. + final EdgeInsets padding; + + /// Button border radius. + final BorderRadius borderRadius; + + /// Button text style. + final TextStyle textStyle; + + const MoonButtonSizeProperties({ + required this.height, + required this.gap, + required this.iconSizeValue, + required this.padding, + required this.borderRadius, + required this.textStyle, + }); + + @override + MoonButtonSizeProperties copyWith({ + double? height, + double? gap, + double? iconSizeValue, + EdgeInsets? padding, + BorderRadius? borderRadius, + TextStyle? textStyle, + }) { + return MoonButtonSizeProperties( + height: height ?? this.height, + gap: gap ?? this.gap, + iconSizeValue: iconSizeValue ?? this.iconSizeValue, + padding: padding ?? this.padding, + borderRadius: borderRadius ?? this.borderRadius, + textStyle: textStyle ?? this.textStyle, + ); + } + + @override + MoonButtonSizeProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonButtonSizeProperties) return this; + + return MoonButtonSizeProperties( + height: lerpDouble(height, other.height, t)!, + gap: lerpDouble(gap, other.gap, t)!, + iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, + padding: EdgeInsets.lerp(padding, other.padding, t)!, + borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, + textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonButtonSizeProperties")) + ..add(DoubleProperty("height", height)) + ..add(DoubleProperty("gap", gap)) + ..add(DoubleProperty("iconSizeValue", iconSizeValue)) + ..add(DiagnosticsProperty("padding", padding)) + ..add(DiagnosticsProperty("borderRadius", borderRadius)) + ..add(DiagnosticsProperty("textStyle", textStyle)); + } +} diff --git a/lib/src/theme/button/button_sizes.dart b/lib/src/theme/button/button_sizes.dart index a097f8bf..49cd2e45 100644 --- a/lib/src/theme/button/button_sizes.dart +++ b/lib/src/theme/button/button_sizes.dart @@ -1,102 +1,55 @@ -import 'dart:ui'; - import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; +import 'package:moon_design/src/theme/button/button_size_properties.dart'; @immutable class MoonButtonSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final xs = MoonButtonSizes( - height: MoonSizes.sizes.xs, - gap: MoonSizes.sizes.x5s, - iconSizeValue: MoonSizes.sizes.x2s, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), - borderRadius: MoonBorders.borders.interactiveXs, - textStyle: MoonTextStyles.heading.text12, - ); - - static final sm = MoonButtonSizes( - height: MoonSizes.sizes.sm, - gap: MoonSizes.sizes.x5s, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - borderRadius: MoonBorders.borders.interactiveSm, - textStyle: MoonTextStyles.heading.text14, - ); - - static final md = MoonButtonSizes( - height: MoonSizes.sizes.md, - gap: MoonSizes.sizes.x4s, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), - borderRadius: MoonBorders.borders.interactiveSm, - textStyle: MoonTextStyles.heading.text14, + static final sizes = MoonButtonSizes( + xs: MoonButtonSizeProperties.xs, + sm: MoonButtonSizeProperties.sm, + md: MoonButtonSizeProperties.md, + lg: MoonButtonSizeProperties.lg, + xl: MoonButtonSizeProperties.xl, ); - static final lg = MoonButtonSizes( - height: MoonSizes.sizes.lg, - gap: MoonSizes.sizes.x3s, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), - borderRadius: MoonBorders.borders.interactiveSm, - textStyle: MoonTextStyles.heading.text16, - ); - - static final xl = MoonButtonSizes( - height: MoonSizes.sizes.xl, - gap: MoonSizes.sizes.x2s, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.xs), - borderRadius: MoonBorders.borders.interactiveMd, - textStyle: MoonTextStyles.heading.text16, - ); - - /// Button height. - final double height; - - /// Space between button children. - final double gap; + /// Extra small button properties. + final MoonButtonSizeProperties xs; - /// Button icon size value. - final double iconSizeValue; + /// Small button properties. + final MoonButtonSizeProperties sm; - /// Padding around button children. - final EdgeInsets padding; + /// Medium button properties. + final MoonButtonSizeProperties md; - /// Button border radius. - final BorderRadius borderRadius; + /// Large button properties. + final MoonButtonSizeProperties lg; - /// Button text style. - final TextStyle textStyle; + /// Extra large button properties. + final MoonButtonSizeProperties xl; const MoonButtonSizes({ - required this.height, - required this.gap, - required this.iconSizeValue, - required this.padding, - required this.borderRadius, - required this.textStyle, + required this.xs, + required this.sm, + required this.md, + required this.lg, + required this.xl, }); @override MoonButtonSizes copyWith({ - double? height, - double? gap, - double? iconSizeValue, - EdgeInsets? padding, - BorderRadius? borderRadius, - TextStyle? textStyle, + MoonButtonSizeProperties? xs, + MoonButtonSizeProperties? sm, + MoonButtonSizeProperties? md, + MoonButtonSizeProperties? lg, + MoonButtonSizeProperties? xl, }) { return MoonButtonSizes( - height: height ?? this.height, - gap: gap ?? this.gap, - iconSizeValue: iconSizeValue ?? this.iconSizeValue, - padding: padding ?? this.padding, - borderRadius: borderRadius ?? this.borderRadius, - textStyle: textStyle ?? this.textStyle, + xs: xs ?? this.xs, + sm: sm ?? this.sm, + md: md ?? this.md, + lg: lg ?? this.lg, + xl: xl ?? this.xl, ); } @@ -105,12 +58,11 @@ class MoonButtonSizes extends ThemeExtension with Diagnosticabl if (other is! MoonButtonSizes) return this; return MoonButtonSizes( - height: lerpDouble(height, other.height, t)!, - gap: lerpDouble(gap, other.gap, t)!, - iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, - padding: EdgeInsets.lerp(padding, other.padding, t)!, - borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, - textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, + xs: xs.lerp(other.xs, t), + sm: sm.lerp(other.sm, t), + md: md.lerp(other.md, t), + lg: lg.lerp(other.lg, t), + xl: xl.lerp(other.xl, t), ); } @@ -119,11 +71,10 @@ class MoonButtonSizes extends ThemeExtension with Diagnosticabl super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonButtonSizes")) - ..add(DoubleProperty("height", height)) - ..add(DoubleProperty("gap", gap)) - ..add(DoubleProperty("iconSizeValue", iconSizeValue)) - ..add(DiagnosticsProperty("padding", padding)) - ..add(DiagnosticsProperty("borderRadius", borderRadius)) - ..add(DiagnosticsProperty("textStyle", textStyle)); + ..add(DiagnosticsProperty("xs", xs)) + ..add(DiagnosticsProperty("sm", sm)) + ..add(DiagnosticsProperty("md", md)) + ..add(DiagnosticsProperty("lg", lg)) + ..add(DiagnosticsProperty("xl", xl)); } } diff --git a/lib/src/theme/button/button_theme.dart b/lib/src/theme/button/button_theme.dart index 692339b5..4139b93a 100644 --- a/lib/src/theme/button/button_theme.dart +++ b/lib/src/theme/button/button_theme.dart @@ -1,55 +1,40 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; +import 'package:moon_design/src/theme/button/button_colors.dart'; import 'package:moon_design/src/theme/button/button_sizes.dart'; @immutable class MoonButtonTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonButtonTheme( - xs: MoonButtonSizes.xs, - sm: MoonButtonSizes.sm, - md: MoonButtonSizes.md, - lg: MoonButtonSizes.lg, - xl: MoonButtonSizes.xl, + static final light = MoonButtonTheme( + colors: MoonButtonColors.light, + sizes: MoonButtonSizes.sizes, ); - /// Extra small button properties. - final MoonButtonSizes xs; - - /// Small button properties. - final MoonButtonSizes sm; - - /// Medium button properties. - final MoonButtonSizes md; + static final dark = MoonButtonTheme( + colors: MoonButtonColors.dark, + sizes: MoonButtonSizes.sizes, + ); - /// Large button properties. - final MoonButtonSizes lg; + /// Button colors. + final MoonButtonColors colors; - /// Extra large button properties. - final MoonButtonSizes xl; + /// Button sizes. + final MoonButtonSizes sizes; const MoonButtonTheme({ - required this.xs, - required this.sm, - required this.md, - required this.lg, - required this.xl, + required this.colors, + required this.sizes, }); @override MoonButtonTheme copyWith({ - MoonButtonSizes? xs, - MoonButtonSizes? sm, - MoonButtonSizes? md, - MoonButtonSizes? lg, - MoonButtonSizes? xl, + MoonButtonColors? colors, + MoonButtonSizes? sizes, }) { return MoonButtonTheme( - xs: xs ?? this.xs, - sm: sm ?? this.sm, - md: md ?? this.md, - lg: lg ?? this.lg, - xl: xl ?? this.xl, + colors: colors ?? this.colors, + sizes: sizes ?? this.sizes, ); } @@ -58,11 +43,8 @@ class MoonButtonTheme extends ThemeExtension with Diagnosticabl if (other is! MoonButtonTheme) return this; return MoonButtonTheme( - xs: xs.lerp(other.xs, t), - sm: sm.lerp(other.sm, t), - md: md.lerp(other.md, t), - lg: lg.lerp(other.lg, t), - xl: xl.lerp(other.xl, t), + colors: colors.lerp(other.colors, t), + sizes: sizes.lerp(other.sizes, t), ); } @@ -71,10 +53,7 @@ class MoonButtonTheme extends ThemeExtension with Diagnosticabl super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonButtonTheme")) - ..add(DiagnosticsProperty("xs", xs)) - ..add(DiagnosticsProperty("sm", sm)) - ..add(DiagnosticsProperty("md", md)) - ..add(DiagnosticsProperty("lg", lg)) - ..add(DiagnosticsProperty("xl", xl)); + ..add(DiagnosticsProperty("colors", colors)) + ..add(DiagnosticsProperty("sizes", sizes)); } } diff --git a/lib/src/theme/chip/chip_colors.dart b/lib/src/theme/chip/chip_colors.dart new file mode 100644 index 00000000..96dec7c6 --- /dev/null +++ b/lib/src/theme/chip/chip_colors.dart @@ -0,0 +1,58 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/colors.dart'; + +@immutable +class MoonChipColors extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonChipColors( + activeColor: MoonColors.light.piccolo, + backgroundColor: MoonColors.light.gohan, + ); + + static final dark = MoonChipColors( + activeColor: MoonColors.dark.piccolo, + backgroundColor: MoonColors.dark.gohan, + ); + + /// Chip active color. + final Color activeColor; + + /// Chip background color. + final Color backgroundColor; + + const MoonChipColors({ + required this.activeColor, + required this.backgroundColor, + }); + + @override + MoonChipColors copyWith({ + Color? activeColor, + Color? backgroundColor, + }) { + return MoonChipColors( + activeColor: activeColor ?? this.activeColor, + backgroundColor: backgroundColor ?? this.backgroundColor, + ); + } + + @override + MoonChipColors lerp(ThemeExtension? other, double t) { + if (other is! MoonChipColors) return this; + + return MoonChipColors( + activeColor: Color.lerp(activeColor, other.activeColor, t)!, + backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonChipColors")) + ..add(ColorProperty("activeColor", activeColor)) + ..add(ColorProperty("backgroundColor", backgroundColor)); + } +} diff --git a/lib/src/theme/chip/chip_size_properties.dart b/lib/src/theme/chip/chip_size_properties.dart new file mode 100644 index 00000000..b5649348 --- /dev/null +++ b/lib/src/theme/chip/chip_size_properties.dart @@ -0,0 +1,102 @@ +import 'dart:ui'; + +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/borders.dart'; +import 'package:moon_design/src/theme/sizes.dart'; +import 'package:moon_design/src/theme/typography/text_styles.dart'; + +@immutable +class MoonChipSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { + static final sm = MoonChipSizeProperties( + height: MoonSizes.sizes.sm, + gap: MoonSizes.sizes.x5s, + iconSizeValue: MoonSizes.sizes.x2s, + padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), + borderRadius: MoonBorders.borders.interactiveXs, + textStyle: MoonTextStyles.heading.text14, + ); + + static final md = MoonChipSizeProperties( + height: MoonSizes.sizes.md, + gap: MoonSizes.sizes.x4s, + iconSizeValue: MoonSizes.sizes.xs, + padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), + borderRadius: MoonBorders.borders.interactiveSm, + textStyle: MoonTextStyles.heading.text14, + ); + + /// Chip height. + final double height; + + /// Space between chip children. + final double gap; + + /// Chip icon size value. + final double iconSizeValue; + + /// Padding around chip children. + final EdgeInsets padding; + + /// Chip border radius. + final BorderRadius borderRadius; + + /// Chip text style. + final TextStyle textStyle; + + const MoonChipSizeProperties({ + required this.height, + required this.gap, + required this.iconSizeValue, + required this.padding, + required this.borderRadius, + required this.textStyle, + }); + + @override + MoonChipSizeProperties copyWith({ + double? height, + double? gap, + double? iconSizeValue, + EdgeInsets? padding, + BorderRadius? borderRadius, + TextStyle? textStyle, + }) { + return MoonChipSizeProperties( + height: height ?? this.height, + gap: gap ?? this.gap, + iconSizeValue: iconSizeValue ?? this.iconSizeValue, + padding: padding ?? this.padding, + borderRadius: borderRadius ?? this.borderRadius, + textStyle: textStyle ?? this.textStyle, + ); + } + + @override + MoonChipSizeProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonChipSizeProperties) return this; + + return MoonChipSizeProperties( + height: lerpDouble(height, other.height, t)!, + gap: lerpDouble(gap, other.gap, t)!, + iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, + padding: EdgeInsets.lerp(padding, other.padding, t)!, + borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, + textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonChipSizeProperties")) + ..add(DoubleProperty("height", height)) + ..add(DoubleProperty("gap", gap)) + ..add(DoubleProperty("iconSizeValue", iconSizeValue)) + ..add(DiagnosticsProperty("padding", padding)) + ..add(DiagnosticsProperty("borderRadius", borderRadius)) + ..add(DiagnosticsProperty("textStyle", textStyle)); + } +} diff --git a/lib/src/theme/chip/chip_sizes.dart b/lib/src/theme/chip/chip_sizes.dart index a67ce390..183717c7 100644 --- a/lib/src/theme/chip/chip_sizes.dart +++ b/lib/src/theme/chip/chip_sizes.dart @@ -1,75 +1,37 @@ -import 'dart:ui'; - import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; +import 'package:moon_design/src/theme/chip/chip_size_properties.dart'; @immutable class MoonChipSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sm = MoonChipSizes( - height: MoonSizes.sizes.sm, - gap: MoonSizes.sizes.x5s, - iconSizeValue: MoonSizes.sizes.x2s, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - borderRadius: MoonBorders.borders.interactiveXs, - textStyle: MoonTextStyles.heading.text14, - ); - - static final md = MoonChipSizes( - height: MoonSizes.sizes.md, - gap: MoonSizes.sizes.x4s, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - borderRadius: MoonBorders.borders.interactiveSm, - textStyle: MoonTextStyles.heading.text14, + static final sizes = MoonChipSizes( + sm: MoonChipSizeProperties.sm, + md: MoonChipSizeProperties.md, ); - /// Chip height. - final double height; - - /// Space between chip children. - final double gap; - - /// Chip icon size value. - final double iconSizeValue; - - /// Padding around chip children. - final EdgeInsets padding; - - /// Chip border radius. - final BorderRadius borderRadius; + /// Small chip properties. + final MoonChipSizeProperties sm; - /// Chip text style. - final TextStyle textStyle; + /// Medium chip properties. + final MoonChipSizeProperties md; const MoonChipSizes({ - required this.height, - required this.gap, - required this.iconSizeValue, - required this.padding, - required this.borderRadius, - required this.textStyle, + required this.sm, + required this.md, }); @override MoonChipSizes copyWith({ - double? height, - double? gap, - double? iconSizeValue, - EdgeInsets? padding, - BorderRadius? borderRadius, - TextStyle? textStyle, + MoonChipSizeProperties? xs, + MoonChipSizeProperties? sm, + MoonChipSizeProperties? md, + MoonChipSizeProperties? lg, + MoonChipSizeProperties? xl, }) { return MoonChipSizes( - height: height ?? this.height, - gap: gap ?? this.gap, - iconSizeValue: iconSizeValue ?? this.iconSizeValue, - padding: padding ?? this.padding, - borderRadius: borderRadius ?? this.borderRadius, - textStyle: textStyle ?? this.textStyle, + sm: sm ?? this.sm, + md: md ?? this.md, ); } @@ -78,12 +40,8 @@ class MoonChipSizes extends ThemeExtension with DiagnosticableTre if (other is! MoonChipSizes) return this; return MoonChipSizes( - height: lerpDouble(height, other.height, t)!, - gap: lerpDouble(gap, other.gap, t)!, - iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, - padding: EdgeInsets.lerp(padding, other.padding, t)!, - borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, - textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, + sm: sm.lerp(other.sm, t), + md: md.lerp(other.md, t), ); } @@ -92,11 +50,7 @@ class MoonChipSizes extends ThemeExtension with DiagnosticableTre super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonChipSizes")) - ..add(DoubleProperty("height", height)) - ..add(DoubleProperty("gap", gap)) - ..add(DoubleProperty("iconSizeValue", iconSizeValue)) - ..add(DiagnosticsProperty("padding", padding)) - ..add(DiagnosticsProperty("borderRadius", borderRadius)) - ..add(DiagnosticsProperty("textStyle", textStyle)); + ..add(DiagnosticsProperty("sm", sm)) + ..add(DiagnosticsProperty("md", md)); } } diff --git a/lib/src/theme/chip/chip_theme.dart b/lib/src/theme/chip/chip_theme.dart index 6f94fdcb..9d871707 100644 --- a/lib/src/theme/chip/chip_theme.dart +++ b/lib/src/theme/chip/chip_theme.dart @@ -1,37 +1,40 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; +import 'package:moon_design/src/theme/chip/chip_colors.dart'; import 'package:moon_design/src/theme/chip/chip_sizes.dart'; @immutable class MoonChipTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonChipTheme( - sm: MoonChipSizes.sm, - md: MoonChipSizes.md, + static final light = MoonChipTheme( + colors: MoonChipColors.light, + sizes: MoonChipSizes.sizes, ); - /// Small chip properties. - final MoonChipSizes sm; + static final dark = MoonChipTheme( + colors: MoonChipColors.dark, + sizes: MoonChipSizes.sizes, + ); + + /// Chip colors. + final MoonChipColors colors; - /// Medium chip properties. - final MoonChipSizes md; + /// Chip sizes. + final MoonChipSizes sizes; const MoonChipTheme({ - required this.sm, - required this.md, + required this.colors, + required this.sizes, }); @override MoonChipTheme copyWith({ - MoonChipSizes? xs, - MoonChipSizes? sm, - MoonChipSizes? md, - MoonChipSizes? lg, - MoonChipSizes? xl, + MoonChipColors? colors, + MoonChipSizes? sizes, }) { return MoonChipTheme( - sm: sm ?? this.sm, - md: md ?? this.md, + colors: colors ?? this.colors, + sizes: sizes ?? this.sizes, ); } @@ -40,8 +43,8 @@ class MoonChipTheme extends ThemeExtension with DiagnosticableTre if (other is! MoonChipTheme) return this; return MoonChipTheme( - sm: sm.lerp(other.sm, t), - md: md.lerp(other.md, t), + colors: colors.lerp(other.colors, t), + sizes: sizes.lerp(other.sizes, t), ); } @@ -50,7 +53,7 @@ class MoonChipTheme extends ThemeExtension with DiagnosticableTre super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonChipTheme")) - ..add(DiagnosticsProperty("sm", sm)) - ..add(DiagnosticsProperty("md", md)); + ..add(DiagnosticsProperty("colors", colors)) + ..add(DiagnosticsProperty("sizes", sizes)); } } diff --git a/lib/src/theme/loaders/circular_loader/circular_loader_colors.dart b/lib/src/theme/loaders/circular_loader/circular_loader_colors.dart new file mode 100644 index 00000000..ee51a12b --- /dev/null +++ b/lib/src/theme/loaders/circular_loader/circular_loader_colors.dart @@ -0,0 +1,58 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/colors.dart'; + +@immutable +class MoonCircularLoaderColors extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonCircularLoaderColors( + color: MoonColors.light.hit, + backgroundColor: Colors.transparent, + ); + + static final dark = MoonCircularLoaderColors( + color: MoonColors.dark.hit, + backgroundColor: Colors.transparent, + ); + + /// Circular loader color. + final Color color; + + /// Circular loader background color. + final Color backgroundColor; + + const MoonCircularLoaderColors({ + required this.color, + required this.backgroundColor, + }); + + @override + MoonCircularLoaderColors copyWith({ + Color? color, + Color? backgroundColor, + }) { + return MoonCircularLoaderColors( + color: color ?? this.color, + backgroundColor: backgroundColor ?? this.backgroundColor, + ); + } + + @override + MoonCircularLoaderColors lerp(ThemeExtension? other, double t) { + if (other is! MoonCircularLoaderColors) return this; + + return MoonCircularLoaderColors( + color: Color.lerp(color, other.color, t)!, + backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonCircularLoaderColors")) + ..add(ColorProperty("color", color)) + ..add(ColorProperty("backgroundColor", backgroundColor)); + } +} diff --git a/lib/src/theme/loaders/circular_loader_sizes.dart b/lib/src/theme/loaders/circular_loader/circular_loader_size_properties.dart similarity index 64% rename from lib/src/theme/loaders/circular_loader_sizes.dart rename to lib/src/theme/loaders/circular_loader/circular_loader_size_properties.dart index f5ae269c..4d917cf6 100644 --- a/lib/src/theme/loaders/circular_loader_sizes.dart +++ b/lib/src/theme/loaders/circular_loader/circular_loader_size_properties.dart @@ -6,28 +6,29 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/sizes.dart'; @immutable -class MoonCircularLoaderSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final x2s = MoonCircularLoaderSizes( +class MoonCircularLoaderSizeProperties extends ThemeExtension + with DiagnosticableTreeMixin { + static final x2s = MoonCircularLoaderSizeProperties( loaderSizeValue: MoonSizes.sizes.x2s, loaderStrokeWidth: MoonSizes.sizes.x6s, ); - static final xs = MoonCircularLoaderSizes( + static final xs = MoonCircularLoaderSizeProperties( loaderSizeValue: MoonSizes.sizes.xs, loaderStrokeWidth: MoonSizes.sizes.x6s, ); - static final sm = MoonCircularLoaderSizes( + static final sm = MoonCircularLoaderSizeProperties( loaderSizeValue: MoonSizes.sizes.sm, loaderStrokeWidth: MoonSizes.sizes.x6s, ); - static final md = MoonCircularLoaderSizes( + static final md = MoonCircularLoaderSizeProperties( loaderSizeValue: MoonSizes.sizes.md, loaderStrokeWidth: MoonSizes.sizes.x5s, ); - static final lg = MoonCircularLoaderSizes( + static final lg = MoonCircularLoaderSizeProperties( loaderSizeValue: MoonSizes.sizes.lg, loaderStrokeWidth: MoonSizes.sizes.x5s, ); @@ -38,27 +39,27 @@ class MoonCircularLoaderSizes extends ThemeExtension wi /// Circular loader stroke width. final double loaderStrokeWidth; - const MoonCircularLoaderSizes({ + const MoonCircularLoaderSizeProperties({ required this.loaderSizeValue, required this.loaderStrokeWidth, }); @override - MoonCircularLoaderSizes copyWith({ + MoonCircularLoaderSizeProperties copyWith({ double? loaderSizeValue, double? loaderStrokeWidth, }) { - return MoonCircularLoaderSizes( + return MoonCircularLoaderSizeProperties( loaderSizeValue: loaderSizeValue ?? this.loaderSizeValue, loaderStrokeWidth: loaderStrokeWidth ?? this.loaderStrokeWidth, ); } @override - MoonCircularLoaderSizes lerp(ThemeExtension? other, double t) { - if (other is! MoonCircularLoaderSizes) return this; + MoonCircularLoaderSizeProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonCircularLoaderSizeProperties) return this; - return MoonCircularLoaderSizes( + return MoonCircularLoaderSizeProperties( loaderSizeValue: lerpDouble(loaderSizeValue, other.loaderSizeValue, t)!, loaderStrokeWidth: lerpDouble(loaderStrokeWidth, other.loaderStrokeWidth, t)!, ); @@ -68,7 +69,7 @@ class MoonCircularLoaderSizes extends ThemeExtension wi void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties - ..add(DiagnosticsProperty("type", "MoonCircularLoaderSizes")) + ..add(DiagnosticsProperty("type", "MoonCircularLoaderSizeProperties")) ..add(DoubleProperty("loaderSizeValue", loaderSizeValue)) ..add(DoubleProperty("loaderStrokeWidth", loaderStrokeWidth)); } diff --git a/lib/src/theme/loaders/circular_loader/circular_loader_sizes.dart b/lib/src/theme/loaders/circular_loader/circular_loader_sizes.dart new file mode 100644 index 00000000..45ca5008 --- /dev/null +++ b/lib/src/theme/loaders/circular_loader/circular_loader_sizes.dart @@ -0,0 +1,80 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_size_properties.dart'; + +@immutable +class MoonCircularLoaderSizes extends ThemeExtension with DiagnosticableTreeMixin { + static final sizes = MoonCircularLoaderSizes( + x2s: MoonCircularLoaderSizeProperties.x2s, + xs: MoonCircularLoaderSizeProperties.xs, + sm: MoonCircularLoaderSizeProperties.sm, + md: MoonCircularLoaderSizeProperties.md, + lg: MoonCircularLoaderSizeProperties.lg, + ); + + /// (2x) Extra small circular loader properties. + final MoonCircularLoaderSizeProperties x2s; + + /// Extra small circular loader properties. + final MoonCircularLoaderSizeProperties xs; + + /// Small circular loader properties. + final MoonCircularLoaderSizeProperties sm; + + /// Medium circular loader properties. + final MoonCircularLoaderSizeProperties md; + + /// Large circular loader properties. + final MoonCircularLoaderSizeProperties lg; + + const MoonCircularLoaderSizes({ + required this.x2s, + required this.xs, + required this.sm, + required this.md, + required this.lg, + }); + + @override + MoonCircularLoaderSizes copyWith({ + MoonCircularLoaderSizeProperties? x2s, + MoonCircularLoaderSizeProperties? xs, + MoonCircularLoaderSizeProperties? sm, + MoonCircularLoaderSizeProperties? md, + MoonCircularLoaderSizeProperties? lg, + }) { + return MoonCircularLoaderSizes( + x2s: x2s ?? this.x2s, + xs: xs ?? this.xs, + sm: sm ?? this.sm, + md: md ?? this.md, + lg: lg ?? this.lg, + ); + } + + @override + MoonCircularLoaderSizes lerp(ThemeExtension? other, double t) { + if (other is! MoonCircularLoaderSizes) return this; + + return MoonCircularLoaderSizes( + x2s: x2s.lerp(other.x2s, t), + xs: xs.lerp(other.xs, t), + sm: sm.lerp(other.sm, t), + md: md.lerp(other.md, t), + lg: lg.lerp(other.lg, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonCircularLoaderSizes")) + ..add(DiagnosticsProperty("x2s", x2s)) + ..add(DiagnosticsProperty("xs", xs)) + ..add(DiagnosticsProperty("sm", sm)) + ..add(DiagnosticsProperty("md", md)) + ..add(DiagnosticsProperty("lg", lg)); + } +} diff --git a/lib/src/theme/loaders/circular_loader/circular_loader_theme.dart b/lib/src/theme/loaders/circular_loader/circular_loader_theme.dart new file mode 100644 index 00000000..6dec90a2 --- /dev/null +++ b/lib/src/theme/loaders/circular_loader/circular_loader_theme.dart @@ -0,0 +1,59 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_colors.dart'; +import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_sizes.dart'; + +@immutable +class MoonCircularLoaderTheme extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonCircularLoaderTheme( + colors: MoonCircularLoaderColors.light, + sizes: MoonCircularLoaderSizes.sizes, + ); + + static final dark = MoonCircularLoaderTheme( + colors: MoonCircularLoaderColors.dark, + sizes: MoonCircularLoaderSizes.sizes, + ); + + /// Circular loader colors. + final MoonCircularLoaderColors colors; + + /// Circular loader sizes. + final MoonCircularLoaderSizes sizes; + + const MoonCircularLoaderTheme({ + required this.colors, + required this.sizes, + }); + + @override + MoonCircularLoaderTheme copyWith({ + MoonCircularLoaderColors? colors, + MoonCircularLoaderSizes? sizes, + }) { + return MoonCircularLoaderTheme( + colors: colors ?? this.colors, + sizes: sizes ?? this.sizes, + ); + } + + @override + MoonCircularLoaderTheme lerp(ThemeExtension? other, double t) { + if (other is! MoonCircularLoaderTheme) return this; + + return MoonCircularLoaderTheme( + colors: colors.lerp(other.colors, t), + sizes: sizes.lerp(other.sizes, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonCircularLoaderTheme")) + ..add(DiagnosticsProperty("colors", colors)) + ..add(DiagnosticsProperty("sizes", sizes)); + } +} diff --git a/lib/src/theme/loaders/circular_loader_theme.dart b/lib/src/theme/loaders/circular_loader_theme.dart deleted file mode 100644 index 29b6928f..00000000 --- a/lib/src/theme/loaders/circular_loader_theme.dart +++ /dev/null @@ -1,80 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; - -import 'package:moon_design/src/theme/loaders/circular_loader_sizes.dart'; - -@immutable -class MoonCircularLoaderTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonCircularLoaderTheme( - x2s: MoonCircularLoaderSizes.x2s, - xs: MoonCircularLoaderSizes.xs, - sm: MoonCircularLoaderSizes.sm, - md: MoonCircularLoaderSizes.md, - lg: MoonCircularLoaderSizes.lg, - ); - - /// (2x) Extra small circular loader properties. - final MoonCircularLoaderSizes x2s; - - /// Extra small circular loader properties. - final MoonCircularLoaderSizes xs; - - /// Small circular loader properties. - final MoonCircularLoaderSizes sm; - - /// Medium circular loader properties. - final MoonCircularLoaderSizes md; - - /// Large circular loader properties. - final MoonCircularLoaderSizes lg; - - const MoonCircularLoaderTheme({ - required this.x2s, - required this.xs, - required this.sm, - required this.md, - required this.lg, - }); - - @override - MoonCircularLoaderTheme copyWith({ - MoonCircularLoaderSizes? x2s, - MoonCircularLoaderSizes? xs, - MoonCircularLoaderSizes? sm, - MoonCircularLoaderSizes? md, - MoonCircularLoaderSizes? lg, - }) { - return MoonCircularLoaderTheme( - x2s: x2s ?? this.x2s, - xs: xs ?? this.xs, - sm: sm ?? this.sm, - md: md ?? this.md, - lg: lg ?? this.lg, - ); - } - - @override - MoonCircularLoaderTheme lerp(ThemeExtension? other, double t) { - if (other is! MoonCircularLoaderTheme) return this; - - return MoonCircularLoaderTheme( - x2s: x2s.lerp(other.x2s, t), - xs: xs.lerp(other.xs, t), - sm: sm.lerp(other.sm, t), - md: md.lerp(other.md, t), - lg: lg.lerp(other.lg, t), - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty("type", "MoonCircularLoaderTheme")) - ..add(DiagnosticsProperty("x2s", x2s)) - ..add(DiagnosticsProperty("xs", xs)) - ..add(DiagnosticsProperty("sm", sm)) - ..add(DiagnosticsProperty("md", md)) - ..add(DiagnosticsProperty("lg", lg)); - } -} diff --git a/lib/src/theme/loaders/linear_loader/linear_loader_colors.dart b/lib/src/theme/loaders/linear_loader/linear_loader_colors.dart new file mode 100644 index 00000000..66b60030 --- /dev/null +++ b/lib/src/theme/loaders/linear_loader/linear_loader_colors.dart @@ -0,0 +1,58 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/colors.dart'; + +@immutable +class MoonLinearLoaderColors extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonLinearLoaderColors( + color: MoonColors.light.hit, + backgroundColor: Colors.transparent, + ); + + static final dark = MoonLinearLoaderColors( + color: MoonColors.dark.hit, + backgroundColor: Colors.transparent, + ); + + /// Linear loader color. + final Color color; + + /// Linear loader background color. + final Color backgroundColor; + + const MoonLinearLoaderColors({ + required this.color, + required this.backgroundColor, + }); + + @override + MoonLinearLoaderColors copyWith({ + Color? color, + Color? backgroundColor, + }) { + return MoonLinearLoaderColors( + color: color ?? this.color, + backgroundColor: backgroundColor ?? this.backgroundColor, + ); + } + + @override + MoonLinearLoaderColors lerp(ThemeExtension? other, double t) { + if (other is! MoonLinearLoaderColors) return this; + + return MoonLinearLoaderColors( + color: Color.lerp(color, other.color, t)!, + backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonLinearLoaderColors")) + ..add(ColorProperty("color", color)) + ..add(ColorProperty("backgroundColor", backgroundColor)); + } +} diff --git a/lib/src/theme/loaders/linear_loader_sizes.dart b/lib/src/theme/loaders/linear_loader/linear_loader_size_properties.dart similarity index 64% rename from lib/src/theme/loaders/linear_loader_sizes.dart rename to lib/src/theme/loaders/linear_loader/linear_loader_size_properties.dart index cde036e7..eb15c714 100644 --- a/lib/src/theme/loaders/linear_loader_sizes.dart +++ b/lib/src/theme/loaders/linear_loader/linear_loader_size_properties.dart @@ -6,28 +6,29 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/sizes.dart'; @immutable -class MoonLinearLoaderSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final x6s = MoonLinearLoaderSizes( +class MoonLinearLoaderSizeProperties extends ThemeExtension + with DiagnosticableTreeMixin { + static final x6s = MoonLinearLoaderSizeProperties( borderRadiusValue: MoonSizes.sizes.x6s, loaderHeight: MoonSizes.sizes.x6s, ); - static final x5s = MoonLinearLoaderSizes( + static final x5s = MoonLinearLoaderSizeProperties( borderRadiusValue: MoonSizes.sizes.x5s, loaderHeight: MoonSizes.sizes.x5s, ); - static final x4s = MoonLinearLoaderSizes( + static final x4s = MoonLinearLoaderSizeProperties( borderRadiusValue: MoonSizes.sizes.x4s, loaderHeight: MoonSizes.sizes.x4s, ); - static final x3s = MoonLinearLoaderSizes( + static final x3s = MoonLinearLoaderSizeProperties( borderRadiusValue: MoonSizes.sizes.x3s, loaderHeight: MoonSizes.sizes.x3s, ); - static final x2s = MoonLinearLoaderSizes( + static final x2s = MoonLinearLoaderSizeProperties( borderRadiusValue: MoonSizes.sizes.x2s, loaderHeight: MoonSizes.sizes.x2s, ); @@ -38,27 +39,27 @@ class MoonLinearLoaderSizes extends ThemeExtension with D /// Linear loader height. final double loaderHeight; - const MoonLinearLoaderSizes({ + const MoonLinearLoaderSizeProperties({ required this.borderRadiusValue, required this.loaderHeight, }); @override - MoonLinearLoaderSizes copyWith({ + MoonLinearLoaderSizeProperties copyWith({ double? borderRadiusValue, double? loaderHeight, }) { - return MoonLinearLoaderSizes( + return MoonLinearLoaderSizeProperties( borderRadiusValue: borderRadiusValue ?? this.borderRadiusValue, loaderHeight: loaderHeight ?? this.loaderHeight, ); } @override - MoonLinearLoaderSizes lerp(ThemeExtension? other, double t) { - if (other is! MoonLinearLoaderSizes) return this; + MoonLinearLoaderSizeProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonLinearLoaderSizeProperties) return this; - return MoonLinearLoaderSizes( + return MoonLinearLoaderSizeProperties( borderRadiusValue: lerpDouble(borderRadiusValue, other.borderRadiusValue, t)!, loaderHeight: lerpDouble(loaderHeight, other.loaderHeight, t)!, ); @@ -68,7 +69,7 @@ class MoonLinearLoaderSizes extends ThemeExtension with D void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties - ..add(DiagnosticsProperty("type", "MoonLinearLoaderSizes")) + ..add(DiagnosticsProperty("type", "MoonLinearLoaderSizeProperties")) ..add(DoubleProperty("borderRadiusValue", borderRadiusValue)) ..add(DoubleProperty("loaderHeight", loaderHeight)); } diff --git a/lib/src/theme/loaders/linear_loader/linear_loader_sizes.dart b/lib/src/theme/loaders/linear_loader/linear_loader_sizes.dart new file mode 100644 index 00000000..682f2bd0 --- /dev/null +++ b/lib/src/theme/loaders/linear_loader/linear_loader_sizes.dart @@ -0,0 +1,80 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_size_properties.dart'; + +@immutable +class MoonLinearLoaderSizes extends ThemeExtension with DiagnosticableTreeMixin { + static final sizes = MoonLinearLoaderSizes( + x6s: MoonLinearLoaderSizeProperties.x6s, + x5s: MoonLinearLoaderSizeProperties.x5s, + x4s: MoonLinearLoaderSizeProperties.x4s, + x3s: MoonLinearLoaderSizeProperties.x3s, + x2s: MoonLinearLoaderSizeProperties.x2s, + ); + + /// (6x) Extra small linear loader properties. + final MoonLinearLoaderSizeProperties x6s; + + /// (5x) Extra small linear loader properties. + final MoonLinearLoaderSizeProperties x5s; + + /// (4x) Extra small linear loader properties. + final MoonLinearLoaderSizeProperties x4s; + + /// (3x) Extra small linear loader properties. + final MoonLinearLoaderSizeProperties x3s; + + /// (2x) Extra small linear loader properties. + final MoonLinearLoaderSizeProperties x2s; + + const MoonLinearLoaderSizes({ + required this.x6s, + required this.x5s, + required this.x4s, + required this.x3s, + required this.x2s, + }); + + @override + MoonLinearLoaderSizes copyWith({ + MoonLinearLoaderSizeProperties? x6s, + MoonLinearLoaderSizeProperties? x5s, + MoonLinearLoaderSizeProperties? x4s, + MoonLinearLoaderSizeProperties? x3s, + MoonLinearLoaderSizeProperties? x2s, + }) { + return MoonLinearLoaderSizes( + x6s: x6s ?? this.x6s, + x5s: x5s ?? this.x5s, + x4s: x4s ?? this.x4s, + x3s: x3s ?? this.x3s, + x2s: x2s ?? this.x2s, + ); + } + + @override + MoonLinearLoaderSizes lerp(ThemeExtension? other, double t) { + if (other is! MoonLinearLoaderSizes) return this; + + return MoonLinearLoaderSizes( + x6s: x6s.lerp(other.x6s, t), + x5s: x5s.lerp(other.x5s, t), + x4s: x4s.lerp(other.x4s, t), + x3s: x3s.lerp(other.x3s, t), + x2s: x2s.lerp(other.x2s, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonLinearLoaderSizes")) + ..add(DiagnosticsProperty("x6s", x6s)) + ..add(DiagnosticsProperty("x5s", x5s)) + ..add(DiagnosticsProperty("x4s", x4s)) + ..add(DiagnosticsProperty("x3s", x3s)) + ..add(DiagnosticsProperty("x2s", x2s)); + } +} diff --git a/lib/src/theme/loaders/linear_loader/linear_loader_theme.dart b/lib/src/theme/loaders/linear_loader/linear_loader_theme.dart new file mode 100644 index 00000000..0cdd3909 --- /dev/null +++ b/lib/src/theme/loaders/linear_loader/linear_loader_theme.dart @@ -0,0 +1,59 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_colors.dart'; +import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_sizes.dart'; + +@immutable +class MoonLinearLoaderTheme extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonLinearLoaderTheme( + colors: MoonLinearLoaderColors.light, + sizes: MoonLinearLoaderSizes.sizes, + ); + + static final dark = MoonLinearLoaderTheme( + colors: MoonLinearLoaderColors.dark, + sizes: MoonLinearLoaderSizes.sizes, + ); + + /// Circular loader colors. + final MoonLinearLoaderColors colors; + + /// Circular loader sizes. + final MoonLinearLoaderSizes sizes; + + const MoonLinearLoaderTheme({ + required this.colors, + required this.sizes, + }); + + @override + MoonLinearLoaderTheme copyWith({ + MoonLinearLoaderColors? colors, + MoonLinearLoaderSizes? sizes, + }) { + return MoonLinearLoaderTheme( + colors: colors ?? this.colors, + sizes: sizes ?? this.sizes, + ); + } + + @override + MoonLinearLoaderTheme lerp(ThemeExtension? other, double t) { + if (other is! MoonLinearLoaderTheme) return this; + + return MoonLinearLoaderTheme( + colors: colors.lerp(other.colors, t), + sizes: sizes.lerp(other.sizes, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonLinearLoaderTheme")) + ..add(DiagnosticsProperty("colors", colors)) + ..add(DiagnosticsProperty("sizes", sizes)); + } +} diff --git a/lib/src/theme/loaders/linear_loader_theme.dart b/lib/src/theme/loaders/linear_loader_theme.dart deleted file mode 100644 index 180e26bc..00000000 --- a/lib/src/theme/loaders/linear_loader_theme.dart +++ /dev/null @@ -1,80 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; - -import 'package:moon_design/src/theme/loaders/linear_loader_sizes.dart'; - -@immutable -class MoonLinearLoaderTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonLinearLoaderTheme( - x6s: MoonLinearLoaderSizes.x6s, - x5s: MoonLinearLoaderSizes.x5s, - x4s: MoonLinearLoaderSizes.x4s, - x3s: MoonLinearLoaderSizes.x3s, - x2s: MoonLinearLoaderSizes.x2s, - ); - - /// (6x) Extra small linear loader properties. - final MoonLinearLoaderSizes x6s; - - /// (5x) Extra small linear loader properties. - final MoonLinearLoaderSizes x5s; - - /// (4x) Extra small linear loader properties. - final MoonLinearLoaderSizes x4s; - - /// (3x) Extra small linear loader properties. - final MoonLinearLoaderSizes x3s; - - /// (2x) Extra small linear loader properties. - final MoonLinearLoaderSizes x2s; - - const MoonLinearLoaderTheme({ - required this.x6s, - required this.x5s, - required this.x4s, - required this.x3s, - required this.x2s, - }); - - @override - MoonLinearLoaderTheme copyWith({ - MoonLinearLoaderSizes? x6s, - MoonLinearLoaderSizes? x5s, - MoonLinearLoaderSizes? x4s, - MoonLinearLoaderSizes? x3s, - MoonLinearLoaderSizes? x2s, - }) { - return MoonLinearLoaderTheme( - x6s: x6s ?? this.x6s, - x5s: x5s ?? this.x5s, - x4s: x4s ?? this.x4s, - x3s: x3s ?? this.x3s, - x2s: x2s ?? this.x2s, - ); - } - - @override - MoonLinearLoaderTheme lerp(ThemeExtension? other, double t) { - if (other is! MoonLinearLoaderTheme) return this; - - return MoonLinearLoaderTheme( - x6s: x6s.lerp(other.x6s, t), - x5s: x5s.lerp(other.x5s, t), - x4s: x4s.lerp(other.x4s, t), - x3s: x3s.lerp(other.x3s, t), - x2s: x2s.lerp(other.x2s, t), - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty("type", "MoonLinearLoaderTheme")) - ..add(DiagnosticsProperty("x6s", x6s)) - ..add(DiagnosticsProperty("x5s", x5s)) - ..add(DiagnosticsProperty("x4s", x4s)) - ..add(DiagnosticsProperty("x3s", x3s)) - ..add(DiagnosticsProperty("x2s", x2s)); - } -} diff --git a/lib/src/theme/progress/circular_progress/circular_progress_colors.dart b/lib/src/theme/progress/circular_progress/circular_progress_colors.dart new file mode 100644 index 00000000..3a0a3a4d --- /dev/null +++ b/lib/src/theme/progress/circular_progress/circular_progress_colors.dart @@ -0,0 +1,58 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/colors.dart'; + +@immutable +class MoonCircularProgressColors extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonCircularProgressColors( + color: MoonColors.light.piccolo, + backgroundColor: MoonColors.light.trunks, + ); + + static final dark = MoonCircularProgressColors( + color: MoonColors.dark.piccolo, + backgroundColor: MoonColors.dark.trunks, + ); + + /// Circular progress color. + final Color color; + + /// Circular progress background color. + final Color backgroundColor; + + const MoonCircularProgressColors({ + required this.color, + required this.backgroundColor, + }); + + @override + MoonCircularProgressColors copyWith({ + Color? color, + Color? backgroundColor, + }) { + return MoonCircularProgressColors( + color: color ?? this.color, + backgroundColor: backgroundColor ?? this.backgroundColor, + ); + } + + @override + MoonCircularProgressColors lerp(ThemeExtension? other, double t) { + if (other is! MoonCircularProgressColors) return this; + + return MoonCircularProgressColors( + color: Color.lerp(color, other.color, t)!, + backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonCircularProgressColors")) + ..add(ColorProperty("color", color)) + ..add(ColorProperty("backgroundColor", backgroundColor)); + } +} diff --git a/lib/src/theme/progress/circular_progress_sizes.dart b/lib/src/theme/progress/circular_progress/circular_progress_size_properties.dart similarity index 67% rename from lib/src/theme/progress/circular_progress_sizes.dart rename to lib/src/theme/progress/circular_progress/circular_progress_size_properties.dart index 22df38ef..f6c10989 100644 --- a/lib/src/theme/progress/circular_progress_sizes.dart +++ b/lib/src/theme/progress/circular_progress/circular_progress_size_properties.dart @@ -6,28 +6,29 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/sizes.dart'; @immutable -class MoonCircularProgressSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final x2s = MoonCircularProgressSizes( +class MoonCircularProgressSizeProperties extends ThemeExtension + with DiagnosticableTreeMixin { + static final x2s = MoonCircularProgressSizeProperties( progressSizeValue: MoonSizes.sizes.x2s, progressStrokeWidth: MoonSizes.sizes.x6s, ); - static final xs = MoonCircularProgressSizes( + static final xs = MoonCircularProgressSizeProperties( progressSizeValue: MoonSizes.sizes.xs, progressStrokeWidth: MoonSizes.sizes.x6s, ); - static final sm = MoonCircularProgressSizes( + static final sm = MoonCircularProgressSizeProperties( progressSizeValue: MoonSizes.sizes.sm, progressStrokeWidth: MoonSizes.sizes.x6s, ); - static final md = MoonCircularProgressSizes( + static final md = MoonCircularProgressSizeProperties( progressSizeValue: MoonSizes.sizes.md, progressStrokeWidth: MoonSizes.sizes.x5s, ); - static final lg = MoonCircularProgressSizes( + static final lg = MoonCircularProgressSizeProperties( progressSizeValue: MoonSizes.sizes.lg, progressStrokeWidth: MoonSizes.sizes.x5s, ); @@ -38,27 +39,27 @@ class MoonCircularProgressSizes extends ThemeExtension? other, double t) { - if (other is! MoonCircularProgressSizes) return this; + MoonCircularProgressSizeProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonCircularProgressSizeProperties) return this; - return MoonCircularProgressSizes( + return MoonCircularProgressSizeProperties( progressSizeValue: lerpDouble(progressSizeValue, other.progressSizeValue, t)!, progressStrokeWidth: lerpDouble(progressStrokeWidth, other.progressStrokeWidth, t)!, ); @@ -68,7 +69,7 @@ class MoonCircularProgressSizes extends ThemeExtension with DiagnosticableTreeMixin { + static final sizes = MoonCircularProgressSizes( + x2s: MoonCircularProgressSizeProperties.x2s, + xs: MoonCircularProgressSizeProperties.xs, + sm: MoonCircularProgressSizeProperties.sm, + md: MoonCircularProgressSizeProperties.md, + lg: MoonCircularProgressSizeProperties.lg, + ); + + /// (2x) Extra small circular progress properties. + final MoonCircularProgressSizeProperties x2s; + + /// Extra small circular progress properties. + final MoonCircularProgressSizeProperties xs; + + /// Small circular progress properties. + final MoonCircularProgressSizeProperties sm; + + /// Medium circular progress properties. + final MoonCircularProgressSizeProperties md; + + /// Large circular progress properties. + final MoonCircularProgressSizeProperties lg; + + const MoonCircularProgressSizes({ + required this.x2s, + required this.xs, + required this.sm, + required this.md, + required this.lg, + }); + + @override + MoonCircularProgressSizes copyWith({ + MoonCircularProgressSizeProperties? x2s, + MoonCircularProgressSizeProperties? xs, + MoonCircularProgressSizeProperties? sm, + MoonCircularProgressSizeProperties? md, + MoonCircularProgressSizeProperties? lg, + }) { + return MoonCircularProgressSizes( + x2s: x2s ?? this.x2s, + xs: xs ?? this.xs, + sm: sm ?? this.sm, + md: md ?? this.md, + lg: lg ?? this.lg, + ); + } + + @override + MoonCircularProgressSizes lerp(ThemeExtension? other, double t) { + if (other is! MoonCircularProgressSizes) return this; + + return MoonCircularProgressSizes( + x2s: x2s.lerp(other.x2s, t), + xs: xs.lerp(other.xs, t), + sm: sm.lerp(other.sm, t), + md: md.lerp(other.md, t), + lg: lg.lerp(other.lg, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonCircularProgressSizes")) + ..add(DiagnosticsProperty("x2s", x2s)) + ..add(DiagnosticsProperty("xs", xs)) + ..add(DiagnosticsProperty("sm", sm)) + ..add(DiagnosticsProperty("md", md)) + ..add(DiagnosticsProperty("lg", lg)); + } +} diff --git a/lib/src/theme/progress/circular_progress/circular_progress_theme.dart b/lib/src/theme/progress/circular_progress/circular_progress_theme.dart new file mode 100644 index 00000000..301809ac --- /dev/null +++ b/lib/src/theme/progress/circular_progress/circular_progress_theme.dart @@ -0,0 +1,59 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_colors.dart'; +import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_sizes.dart'; + +@immutable +class MoonCircularProgressTheme extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonCircularProgressTheme( + colors: MoonCircularProgressColors.light, + sizes: MoonCircularProgressSizes.sizes, + ); + + static final dark = MoonCircularProgressTheme( + colors: MoonCircularProgressColors.dark, + sizes: MoonCircularProgressSizes.sizes, + ); + + /// Circular progress colors. + final MoonCircularProgressColors colors; + + /// Circular progress sizes. + final MoonCircularProgressSizes sizes; + + const MoonCircularProgressTheme({ + required this.colors, + required this.sizes, + }); + + @override + MoonCircularProgressTheme copyWith({ + MoonCircularProgressColors? colors, + MoonCircularProgressSizes? sizes, + }) { + return MoonCircularProgressTheme( + colors: colors ?? this.colors, + sizes: sizes ?? this.sizes, + ); + } + + @override + MoonCircularProgressTheme lerp(ThemeExtension? other, double t) { + if (other is! MoonCircularProgressTheme) return this; + + return MoonCircularProgressTheme( + colors: colors.lerp(other.colors, t), + sizes: sizes.lerp(other.sizes, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonCircularProgressTheme")) + ..add(DiagnosticsProperty("colors", colors)) + ..add(DiagnosticsProperty("sizes", sizes)); + } +} diff --git a/lib/src/theme/progress/circular_progress_theme.dart b/lib/src/theme/progress/circular_progress_theme.dart deleted file mode 100644 index 69ae29f3..00000000 --- a/lib/src/theme/progress/circular_progress_theme.dart +++ /dev/null @@ -1,80 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; - -import 'package:moon_design/src/theme/progress/circular_progress_sizes.dart'; - -@immutable -class MoonCircularProgressTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonCircularProgressTheme( - x2s: MoonCircularProgressSizes.x2s, - xs: MoonCircularProgressSizes.xs, - sm: MoonCircularProgressSizes.sm, - md: MoonCircularProgressSizes.md, - lg: MoonCircularProgressSizes.lg, - ); - - /// (2x) Extra small circular progress properties. - final MoonCircularProgressSizes x2s; - - /// Extra small circular progress properties. - final MoonCircularProgressSizes xs; - - /// Small circular progress properties. - final MoonCircularProgressSizes sm; - - /// Medium circular progress properties. - final MoonCircularProgressSizes md; - - /// Large circular progress properties. - final MoonCircularProgressSizes lg; - - const MoonCircularProgressTheme({ - required this.x2s, - required this.xs, - required this.sm, - required this.md, - required this.lg, - }); - - @override - MoonCircularProgressTheme copyWith({ - MoonCircularProgressSizes? x2s, - MoonCircularProgressSizes? xs, - MoonCircularProgressSizes? sm, - MoonCircularProgressSizes? md, - MoonCircularProgressSizes? lg, - }) { - return MoonCircularProgressTheme( - x2s: x2s ?? this.x2s, - xs: xs ?? this.xs, - sm: sm ?? this.sm, - md: md ?? this.md, - lg: lg ?? this.lg, - ); - } - - @override - MoonCircularProgressTheme lerp(ThemeExtension? other, double t) { - if (other is! MoonCircularProgressTheme) return this; - - return MoonCircularProgressTheme( - x2s: x2s.lerp(other.x2s, t), - xs: xs.lerp(other.xs, t), - sm: sm.lerp(other.sm, t), - md: md.lerp(other.md, t), - lg: lg.lerp(other.lg, t), - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty("type", "MoonCircularProgressTheme")) - ..add(DiagnosticsProperty("x2s", x2s)) - ..add(DiagnosticsProperty("xs", xs)) - ..add(DiagnosticsProperty("sm", sm)) - ..add(DiagnosticsProperty("md", md)) - ..add(DiagnosticsProperty("lg", lg)); - } -} diff --git a/lib/src/theme/progress/linear_progress/linear_progress_colors.dart b/lib/src/theme/progress/linear_progress/linear_progress_colors.dart new file mode 100644 index 00000000..cf91cfdb --- /dev/null +++ b/lib/src/theme/progress/linear_progress/linear_progress_colors.dart @@ -0,0 +1,58 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/colors.dart'; + +@immutable +class MoonLinearProgressColors extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonLinearProgressColors( + color: MoonColors.light.piccolo, + backgroundColor: MoonColors.light.trunks, + ); + + static final dark = MoonLinearProgressColors( + color: MoonColors.dark.piccolo, + backgroundColor: MoonColors.dark.trunks, + ); + + /// Linear progress color. + final Color color; + + /// Linear progress background color. + final Color backgroundColor; + + const MoonLinearProgressColors({ + required this.color, + required this.backgroundColor, + }); + + @override + MoonLinearProgressColors copyWith({ + Color? color, + Color? backgroundColor, + }) { + return MoonLinearProgressColors( + color: color ?? this.color, + backgroundColor: backgroundColor ?? this.backgroundColor, + ); + } + + @override + MoonLinearProgressColors lerp(ThemeExtension? other, double t) { + if (other is! MoonLinearProgressColors) return this; + + return MoonLinearProgressColors( + color: Color.lerp(color, other.color, t)!, + backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonLinearProgressColors")) + ..add(ColorProperty("color", color)) + ..add(ColorProperty("backgroundColor", backgroundColor)); + } +} diff --git a/lib/src/theme/progress/linear_progress_sizes.dart b/lib/src/theme/progress/linear_progress/linear_progress_size_properties.dart similarity index 64% rename from lib/src/theme/progress/linear_progress_sizes.dart rename to lib/src/theme/progress/linear_progress/linear_progress_size_properties.dart index bbbbdc8d..cd60b3c8 100644 --- a/lib/src/theme/progress/linear_progress_sizes.dart +++ b/lib/src/theme/progress/linear_progress/linear_progress_size_properties.dart @@ -6,28 +6,29 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/sizes.dart'; @immutable -class MoonLinearProgressSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final x6s = MoonLinearProgressSizes( +class MoonLinearProgressSizeProperties extends ThemeExtension + with DiagnosticableTreeMixin { + static final x6s = MoonLinearProgressSizeProperties( borderRadiusValue: MoonSizes.sizes.x6s, progressHeight: MoonSizes.sizes.x6s, ); - static final x5s = MoonLinearProgressSizes( + static final x5s = MoonLinearProgressSizeProperties( borderRadiusValue: MoonSizes.sizes.x5s, progressHeight: MoonSizes.sizes.x5s, ); - static final x4s = MoonLinearProgressSizes( + static final x4s = MoonLinearProgressSizeProperties( borderRadiusValue: MoonSizes.sizes.x4s, progressHeight: MoonSizes.sizes.x4s, ); - static final x3s = MoonLinearProgressSizes( + static final x3s = MoonLinearProgressSizeProperties( borderRadiusValue: MoonSizes.sizes.x3s, progressHeight: MoonSizes.sizes.x3s, ); - static final x2s = MoonLinearProgressSizes( + static final x2s = MoonLinearProgressSizeProperties( borderRadiusValue: MoonSizes.sizes.x2s, progressHeight: MoonSizes.sizes.x2s, ); @@ -38,27 +39,27 @@ class MoonLinearProgressSizes extends ThemeExtension wi /// Linear progress height. final double progressHeight; - const MoonLinearProgressSizes({ + const MoonLinearProgressSizeProperties({ required this.borderRadiusValue, required this.progressHeight, }); @override - MoonLinearProgressSizes copyWith({ + MoonLinearProgressSizeProperties copyWith({ double? borderRadiusValue, double? progressHeight, }) { - return MoonLinearProgressSizes( + return MoonLinearProgressSizeProperties( borderRadiusValue: borderRadiusValue ?? this.borderRadiusValue, progressHeight: progressHeight ?? this.progressHeight, ); } @override - MoonLinearProgressSizes lerp(ThemeExtension? other, double t) { - if (other is! MoonLinearProgressSizes) return this; + MoonLinearProgressSizeProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonLinearProgressSizeProperties) return this; - return MoonLinearProgressSizes( + return MoonLinearProgressSizeProperties( borderRadiusValue: lerpDouble(borderRadiusValue, other.borderRadiusValue, t)!, progressHeight: lerpDouble(progressHeight, other.progressHeight, t)!, ); @@ -68,7 +69,7 @@ class MoonLinearProgressSizes extends ThemeExtension wi void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties - ..add(DiagnosticsProperty("type", "MoonLinearProgressSizes")) + ..add(DiagnosticsProperty("type", "MoonLinearProgressSizeProperties")) ..add(DoubleProperty("borderRadiusValue", borderRadiusValue)) ..add(DoubleProperty("progressHeight", progressHeight)); } diff --git a/lib/src/theme/progress/linear_progress/linear_progress_sizes.dart b/lib/src/theme/progress/linear_progress/linear_progress_sizes.dart new file mode 100644 index 00000000..79223293 --- /dev/null +++ b/lib/src/theme/progress/linear_progress/linear_progress_sizes.dart @@ -0,0 +1,80 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_size_properties.dart'; + +@immutable +class MoonLinearProgressSizes extends ThemeExtension with DiagnosticableTreeMixin { + static final sizes = MoonLinearProgressSizes( + x6s: MoonLinearProgressSizeProperties.x6s, + x5s: MoonLinearProgressSizeProperties.x5s, + x4s: MoonLinearProgressSizeProperties.x4s, + x3s: MoonLinearProgressSizeProperties.x3s, + x2s: MoonLinearProgressSizeProperties.x2s, + ); + + /// (6x) Extra small linear progress properties. + final MoonLinearProgressSizeProperties x6s; + + /// (5x) Extra small linear progress properties. + final MoonLinearProgressSizeProperties x5s; + + /// (4x) Extra small linear progress properties. + final MoonLinearProgressSizeProperties x4s; + + /// (3x) Extra small linear progress properties. + final MoonLinearProgressSizeProperties x3s; + + /// (2x) Extra small linear progress properties. + final MoonLinearProgressSizeProperties x2s; + + const MoonLinearProgressSizes({ + required this.x6s, + required this.x5s, + required this.x4s, + required this.x3s, + required this.x2s, + }); + + @override + MoonLinearProgressSizes copyWith({ + MoonLinearProgressSizeProperties? x6s, + MoonLinearProgressSizeProperties? x5s, + MoonLinearProgressSizeProperties? x4s, + MoonLinearProgressSizeProperties? x3s, + MoonLinearProgressSizeProperties? x2s, + }) { + return MoonLinearProgressSizes( + x6s: x6s ?? this.x6s, + x5s: x5s ?? this.x5s, + x4s: x4s ?? this.x4s, + x3s: x3s ?? this.x3s, + x2s: x2s ?? this.x2s, + ); + } + + @override + MoonLinearProgressSizes lerp(ThemeExtension? other, double t) { + if (other is! MoonLinearProgressSizes) return this; + + return MoonLinearProgressSizes( + x6s: x6s.lerp(other.x6s, t), + x5s: x5s.lerp(other.x5s, t), + x4s: x4s.lerp(other.x4s, t), + x3s: x3s.lerp(other.x3s, t), + x2s: x2s.lerp(other.x2s, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonLinearProgressSizes")) + ..add(DiagnosticsProperty("x6s", x6s)) + ..add(DiagnosticsProperty("x5s", x5s)) + ..add(DiagnosticsProperty("x4s", x4s)) + ..add(DiagnosticsProperty("x3s", x3s)) + ..add(DiagnosticsProperty("x2s", x2s)); + } +} diff --git a/lib/src/theme/progress/linear_progress/linear_progress_theme.dart b/lib/src/theme/progress/linear_progress/linear_progress_theme.dart new file mode 100644 index 00000000..769c60dc --- /dev/null +++ b/lib/src/theme/progress/linear_progress/linear_progress_theme.dart @@ -0,0 +1,59 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_colors.dart'; +import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_sizes.dart'; + +@immutable +class MoonLinearProgressTheme extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonLinearProgressTheme( + colors: MoonLinearProgressColors.light, + sizes: MoonLinearProgressSizes.sizes, + ); + + static final dark = MoonLinearProgressTheme( + colors: MoonLinearProgressColors.dark, + sizes: MoonLinearProgressSizes.sizes, + ); + + /// Linear progress colors. + final MoonLinearProgressColors colors; + + /// Linear progress sizes. + final MoonLinearProgressSizes sizes; + + const MoonLinearProgressTheme({ + required this.colors, + required this.sizes, + }); + + @override + MoonLinearProgressTheme copyWith({ + MoonLinearProgressColors? colors, + MoonLinearProgressSizes? sizes, + }) { + return MoonLinearProgressTheme( + colors: colors ?? this.colors, + sizes: sizes ?? this.sizes, + ); + } + + @override + MoonLinearProgressTheme lerp(ThemeExtension? other, double t) { + if (other is! MoonLinearProgressTheme) return this; + + return MoonLinearProgressTheme( + colors: colors.lerp(other.colors, t), + sizes: sizes.lerp(other.sizes, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonLinearProgressTheme")) + ..add(DiagnosticsProperty("colors", colors)) + ..add(DiagnosticsProperty("sizes", sizes)); + } +} diff --git a/lib/src/theme/progress/linear_progress_theme.dart b/lib/src/theme/progress/linear_progress_theme.dart deleted file mode 100644 index 009f4e13..00000000 --- a/lib/src/theme/progress/linear_progress_theme.dart +++ /dev/null @@ -1,80 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; - -import 'package:moon_design/src/theme/progress/linear_progress_sizes.dart'; - -@immutable -class MoonLinearProgressTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonLinearProgressTheme( - x6s: MoonLinearProgressSizes.x6s, - x5s: MoonLinearProgressSizes.x5s, - x4s: MoonLinearProgressSizes.x4s, - x3s: MoonLinearProgressSizes.x3s, - x2s: MoonLinearProgressSizes.x2s, - ); - - /// (6x) Extra small linear progress properties. - final MoonLinearProgressSizes x6s; - - /// (5x) Extra small linear progress properties. - final MoonLinearProgressSizes x5s; - - /// (4x) Extra small linear progress properties. - final MoonLinearProgressSizes x4s; - - /// (3x) Extra small linear progress properties. - final MoonLinearProgressSizes x3s; - - /// (2x) Extra small linear progress properties. - final MoonLinearProgressSizes x2s; - - const MoonLinearProgressTheme({ - required this.x6s, - required this.x5s, - required this.x4s, - required this.x3s, - required this.x2s, - }); - - @override - MoonLinearProgressTheme copyWith({ - MoonLinearProgressSizes? x6s, - MoonLinearProgressSizes? x5s, - MoonLinearProgressSizes? x4s, - MoonLinearProgressSizes? x3s, - MoonLinearProgressSizes? x2s, - }) { - return MoonLinearProgressTheme( - x6s: x6s ?? this.x6s, - x5s: x5s ?? this.x5s, - x4s: x4s ?? this.x4s, - x3s: x3s ?? this.x3s, - x2s: x2s ?? this.x2s, - ); - } - - @override - MoonLinearProgressTheme lerp(ThemeExtension? other, double t) { - if (other is! MoonLinearProgressTheme) return this; - - return MoonLinearProgressTheme( - x6s: x6s.lerp(other.x6s, t), - x5s: x5s.lerp(other.x5s, t), - x4s: x4s.lerp(other.x4s, t), - x3s: x3s.lerp(other.x3s, t), - x2s: x2s.lerp(other.x2s, t), - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty("type", "MoonLinearProgressTheme")) - ..add(DiagnosticsProperty("x6s", x6s)) - ..add(DiagnosticsProperty("x5s", x5s)) - ..add(DiagnosticsProperty("x4s", x4s)) - ..add(DiagnosticsProperty("x3s", x3s)) - ..add(DiagnosticsProperty("x2s", x2s)); - } -} diff --git a/lib/src/theme/tag/tag_colors.dart b/lib/src/theme/tag/tag_colors.dart new file mode 100644 index 00000000..b44b6c51 --- /dev/null +++ b/lib/src/theme/tag/tag_colors.dart @@ -0,0 +1,48 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/colors.dart'; + +@immutable +class MoonTagColors extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonTagColors( + backgroundColor: MoonColors.light.gohan, + ); + + static final dark = MoonTagColors( + backgroundColor: MoonColors.dark.gohan, + ); + + /// Tag background color. + final Color backgroundColor; + + const MoonTagColors({ + required this.backgroundColor, + }); + + @override + MoonTagColors copyWith({ + Color? backgroundColor, + }) { + return MoonTagColors( + backgroundColor: backgroundColor ?? this.backgroundColor, + ); + } + + @override + MoonTagColors lerp(ThemeExtension? other, double t) { + if (other is! MoonTagColors) return this; + + return MoonTagColors( + backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonTagColors")) + ..add(ColorProperty("backgroundColor", backgroundColor)); + } +} diff --git a/lib/src/theme/tag/tag_size_properties.dart b/lib/src/theme/tag/tag_size_properties.dart new file mode 100644 index 00000000..63e6b3d6 --- /dev/null +++ b/lib/src/theme/tag/tag_size_properties.dart @@ -0,0 +1,112 @@ +import 'dart:ui'; + +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/borders.dart'; +import 'package:moon_design/src/theme/sizes.dart'; +import 'package:moon_design/src/theme/typography/text_styles.dart'; + +@immutable +class MoonTagSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { + static final x2s = MoonTagSizeProperties( + height: MoonSizes.sizes.x2s, + gap: MoonSizes.sizes.x5s, + iconSizeValue: MoonSizes.sizes.x3s, + padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), + borderRadius: MoonBorders.borders.interactiveXs, + textStyle: MoonTextStyles.body.text10.copyWith(fontWeight: FontWeight.w400), + upperCaseTextStyle: MoonTextStyles.heading.text9.copyWith(fontWeight: FontWeight.w700), + ); + + static final xs = MoonTagSizeProperties( + height: MoonSizes.sizes.xs, + gap: MoonSizes.sizes.x5s, + iconSizeValue: MoonSizes.sizes.x2s, + padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), + borderRadius: MoonBorders.borders.interactiveXs, + textStyle: MoonTextStyles.body.text12.copyWith(fontWeight: FontWeight.w400), + upperCaseTextStyle: MoonTextStyles.heading.text10, + ); + + /// Tag height. + final double height; + + /// Space between tag children. + final double gap; + + /// Tag icon size value. + final double iconSizeValue; + + /// Padding around tag children. + final EdgeInsets padding; + + /// Tag border radius. + final BorderRadius borderRadius; + + /// Tag body style. + final TextStyle textStyle; + + /// Tag upper case body style. + final TextStyle upperCaseTextStyle; + + const MoonTagSizeProperties({ + required this.height, + required this.gap, + required this.iconSizeValue, + required this.padding, + required this.borderRadius, + required this.textStyle, + required this.upperCaseTextStyle, + }); + + @override + MoonTagSizeProperties copyWith({ + double? height, + double? gap, + double? iconSizeValue, + EdgeInsets? padding, + BorderRadius? borderRadius, + TextStyle? textStyle, + TextStyle? upperCaseTextStyle, + }) { + return MoonTagSizeProperties( + height: height ?? this.height, + gap: gap ?? this.gap, + iconSizeValue: iconSizeValue ?? this.iconSizeValue, + padding: padding ?? this.padding, + borderRadius: borderRadius ?? this.borderRadius, + textStyle: textStyle ?? this.textStyle, + upperCaseTextStyle: upperCaseTextStyle ?? this.upperCaseTextStyle, + ); + } + + @override + MoonTagSizeProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonTagSizeProperties) return this; + + return MoonTagSizeProperties( + height: lerpDouble(height, other.height, t)!, + gap: lerpDouble(gap, other.gap, t)!, + iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, + padding: EdgeInsets.lerp(padding, other.padding, t)!, + borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, + textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, + upperCaseTextStyle: TextStyle.lerp(upperCaseTextStyle, other.upperCaseTextStyle, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonTagSizeProperties")) + ..add(DoubleProperty("height", height)) + ..add(DoubleProperty("gap", gap)) + ..add(DoubleProperty("iconSizeValue", iconSizeValue)) + ..add(DiagnosticsProperty("padding", padding)) + ..add(DiagnosticsProperty("borderRadius", borderRadius)) + ..add(DiagnosticsProperty("textStyle", textStyle)) + ..add(DiagnosticsProperty("upperCaseTextStyle", upperCaseTextStyle)); + } +} diff --git a/lib/src/theme/tag/tag_sizes.dart b/lib/src/theme/tag/tag_sizes.dart index 8fc43eef..8d9930b2 100644 --- a/lib/src/theme/tag/tag_sizes.dart +++ b/lib/src/theme/tag/tag_sizes.dart @@ -1,83 +1,34 @@ -import 'dart:ui'; - import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; +import 'package:moon_design/src/theme/tag/tag_size_properties.dart'; @immutable class MoonTagSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final x2s = MoonTagSizes( - height: MoonSizes.sizes.x2s, - gap: MoonSizes.sizes.x5s, - iconSizeValue: MoonSizes.sizes.x3s, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), - borderRadius: MoonBorders.borders.interactiveXs, - textStyle: MoonTextStyles.text.text10.copyWith(fontWeight: FontWeight.w400), - upperCaseTextStyle: MoonTextStyles.heading.text9.copyWith(fontWeight: FontWeight.w700), - ); - - static final xs = MoonTagSizes( - height: MoonSizes.sizes.xs, - gap: MoonSizes.sizes.x5s, - iconSizeValue: MoonSizes.sizes.x2s, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), - borderRadius: MoonBorders.borders.interactiveXs, - textStyle: MoonTextStyles.text.text12.copyWith(fontWeight: FontWeight.w400), - upperCaseTextStyle: MoonTextStyles.heading.text10, + static final sizes = MoonTagSizes( + x2s: MoonTagSizeProperties.x2s, + xs: MoonTagSizeProperties.xs, ); - /// Tag height. - final double height; - - /// Space between tag children. - final double gap; - - /// Tag icon size value. - final double iconSizeValue; - - /// Padding around tag children. - final EdgeInsets padding; - - /// Tag border radius. - final BorderRadius borderRadius; - - /// Tag text style. - final TextStyle textStyle; + /// (2x) Extra small tag properties. + final MoonTagSizeProperties x2s; - /// Tag upper case text style. - final TextStyle upperCaseTextStyle; + /// Extra small tag properties. + final MoonTagSizeProperties xs; const MoonTagSizes({ - required this.height, - required this.gap, - required this.iconSizeValue, - required this.padding, - required this.borderRadius, - required this.textStyle, - required this.upperCaseTextStyle, + required this.x2s, + required this.xs, }); @override MoonTagSizes copyWith({ - double? height, - double? gap, - double? iconSizeValue, - EdgeInsets? padding, - BorderRadius? borderRadius, - TextStyle? textStyle, - TextStyle? upperCaseTextStyle, + MoonTagSizeProperties? x2s, + MoonTagSizeProperties? xs, }) { return MoonTagSizes( - height: height ?? this.height, - gap: gap ?? this.gap, - iconSizeValue: iconSizeValue ?? this.iconSizeValue, - padding: padding ?? this.padding, - borderRadius: borderRadius ?? this.borderRadius, - textStyle: textStyle ?? this.textStyle, - upperCaseTextStyle: upperCaseTextStyle ?? this.upperCaseTextStyle, + x2s: x2s ?? this.x2s, + xs: xs ?? this.xs, ); } @@ -86,13 +37,8 @@ class MoonTagSizes extends ThemeExtension with DiagnosticableTreeM if (other is! MoonTagSizes) return this; return MoonTagSizes( - height: lerpDouble(height, other.height, t)!, - gap: lerpDouble(gap, other.gap, t)!, - iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, - padding: EdgeInsets.lerp(padding, other.padding, t)!, - borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, - textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, - upperCaseTextStyle: TextStyle.lerp(upperCaseTextStyle, other.upperCaseTextStyle, t)!, + x2s: x2s.lerp(other.x2s, t), + xs: xs.lerp(other.xs, t), ); } @@ -101,12 +47,7 @@ class MoonTagSizes extends ThemeExtension with DiagnosticableTreeM super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTagSizes")) - ..add(DoubleProperty("height", height)) - ..add(DoubleProperty("gap", gap)) - ..add(DoubleProperty("iconSizeValue", iconSizeValue)) - ..add(DiagnosticsProperty("padding", padding)) - ..add(DiagnosticsProperty("borderRadius", borderRadius)) - ..add(DiagnosticsProperty("textStyle", textStyle)) - ..add(DiagnosticsProperty("upperCaseTextStyle", upperCaseTextStyle)); + ..add(DiagnosticsProperty("x2s", x2s)) + ..add(DiagnosticsProperty("xs", xs)); } } diff --git a/lib/src/theme/tag/tag_theme.dart b/lib/src/theme/tag/tag_theme.dart index 51ed6838..03ef5912 100644 --- a/lib/src/theme/tag/tag_theme.dart +++ b/lib/src/theme/tag/tag_theme.dart @@ -1,34 +1,40 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; +import 'package:moon_design/src/theme/tag/tag_colors.dart'; import 'package:moon_design/src/theme/tag/tag_sizes.dart'; @immutable class MoonTagTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonTagTheme( - x2s: MoonTagSizes.x2s, - xs: MoonTagSizes.xs, + static final light = MoonTagTheme( + colors: MoonTagColors.light, + sizes: MoonTagSizes.sizes, ); - /// (2x) Extra small tag properties. - final MoonTagSizes x2s; + static final dark = MoonTagTheme( + colors: MoonTagColors.dark, + sizes: MoonTagSizes.sizes, + ); + + /// Tag colors. + final MoonTagColors colors; - /// Extra small tag properties. - final MoonTagSizes xs; + /// Tag sizes. + final MoonTagSizes sizes; const MoonTagTheme({ - required this.x2s, - required this.xs, + required this.colors, + required this.sizes, }); @override MoonTagTheme copyWith({ - MoonTagSizes? x2s, - MoonTagSizes? xs, + MoonTagColors? colors, + MoonTagSizes? sizes, }) { return MoonTagTheme( - x2s: x2s ?? this.x2s, - xs: xs ?? this.xs, + colors: colors ?? this.colors, + sizes: sizes ?? this.sizes, ); } @@ -37,8 +43,8 @@ class MoonTagTheme extends ThemeExtension with DiagnosticableTreeM if (other is! MoonTagTheme) return this; return MoonTagTheme( - x2s: x2s.lerp(other.x2s, t), - xs: xs.lerp(other.xs, t), + colors: colors.lerp(other.colors, t), + sizes: sizes.lerp(other.sizes, t), ); } @@ -47,7 +53,7 @@ class MoonTagTheme extends ThemeExtension with DiagnosticableTreeM super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTagTheme")) - ..add(DiagnosticsProperty("x2s", x2s)) - ..add(DiagnosticsProperty("xs", xs)); + ..add(DiagnosticsProperty("colors", colors)) + ..add(DiagnosticsProperty("sizes", sizes)); } } diff --git a/lib/src/theme/theme.dart b/lib/src/theme/theme.dart index 839f1149..2e2ac90f 100644 --- a/lib/src/theme/theme.dart +++ b/lib/src/theme/theme.dart @@ -7,74 +7,74 @@ import 'package:moon_design/src/theme/button/button_theme.dart'; import 'package:moon_design/src/theme/chip/chip_theme.dart'; import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/effects/effects.dart'; -import 'package:moon_design/src/theme/loaders/circular_loader_theme.dart'; -import 'package:moon_design/src/theme/loaders/linear_loader_theme.dart'; +import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_theme.dart'; +import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_theme.dart'; import 'package:moon_design/src/theme/opacity.dart'; -import 'package:moon_design/src/theme/progress/circular_progress_theme.dart'; -import 'package:moon_design/src/theme/progress/linear_progress_theme.dart'; +import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_theme.dart'; +import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_theme.dart'; import 'package:moon_design/src/theme/shadows.dart'; import 'package:moon_design/src/theme/sizes.dart'; import 'package:moon_design/src/theme/tag/tag_theme.dart'; -import 'package:moon_design/src/theme/tooltip/tooltip.dart'; +import 'package:moon_design/src/theme/tooltip/tooltip_theme.dart'; import 'package:moon_design/src/theme/typography/typography.dart'; @immutable class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonTheme( - avatarTheme: MoonAvatarTheme.sizes, + avatar: MoonAvatarTheme.light, borders: MoonBorders.borders, - buttonTheme: MoonButtonTheme.sizes, - chipTheme: MoonChipTheme.sizes, - circularLoaderTheme: MoonCircularLoaderTheme.sizes, - circularProgressTheme: MoonCircularProgressTheme.sizes, + button: MoonButtonTheme.light, + chip: MoonChipTheme.light, + circularLoader: MoonCircularLoaderTheme.light, + circularProgress: MoonCircularProgressTheme.light, colors: MoonColors.light, effects: MoonEffects.light, - linearLoaderTheme: MoonLinearLoaderTheme.sizes, - linearProgressTheme: MoonLinearProgressTheme.sizes, + linearLoader: MoonLinearLoaderTheme.light, + linearProgress: MoonLinearProgressTheme.light, opacity: MoonOpacity.opacities, shadows: MoonShadows.light, sizes: MoonSizes.sizes, - tagTheme: MoonTagTheme.sizes, - tooltipTheme: MoonTooltipTheme.tooltip, - typography: MoonTypography.textStyles, + tag: MoonTagTheme.light, + tooltip: MoonTooltipTheme.light, + typography: MoonTypography.light, ); static final dark = MoonTheme( - avatarTheme: MoonAvatarTheme.sizes, + avatar: MoonAvatarTheme.dark, borders: MoonBorders.borders, - buttonTheme: MoonButtonTheme.sizes, - chipTheme: MoonChipTheme.sizes, - circularLoaderTheme: MoonCircularLoaderTheme.sizes, - circularProgressTheme: MoonCircularProgressTheme.sizes, + button: MoonButtonTheme.dark, + chip: MoonChipTheme.dark, + circularLoader: MoonCircularLoaderTheme.dark, + circularProgress: MoonCircularProgressTheme.dark, colors: MoonColors.dark, effects: MoonEffects.dark, - linearLoaderTheme: MoonLinearLoaderTheme.sizes, - linearProgressTheme: MoonLinearProgressTheme.sizes, + linearLoader: MoonLinearLoaderTheme.dark, + linearProgress: MoonLinearProgressTheme.dark, opacity: MoonOpacity.opacities, shadows: MoonShadows.dark, sizes: MoonSizes.sizes, - tagTheme: MoonTagTheme.sizes, - tooltipTheme: MoonTooltipTheme.tooltip, - typography: MoonTypography.textStyles, + tag: MoonTagTheme.dark, + tooltip: MoonTooltipTheme.dark, + typography: MoonTypography.dark, ); /// Moon Design System avatar theming. - final MoonAvatarTheme avatarTheme; + final MoonAvatarTheme avatar; /// Moon Design System borders. final MoonBorders borders; /// Moon Design System buttons theming. - final MoonButtonTheme buttonTheme; + final MoonButtonTheme button; /// Moon Design System chip theming. - final MoonChipTheme chipTheme; + final MoonChipTheme chip; /// Moon Design System circular loader theming. - final MoonCircularLoaderTheme circularLoaderTheme; + final MoonCircularLoaderTheme circularLoader; /// Moon Design System circular progress theming. - final MoonCircularProgressTheme circularProgressTheme; + final MoonCircularProgressTheme circularProgress; /// Moon Design System colors. final MoonColors colors; @@ -83,10 +83,10 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { final MoonEffects effects; /// Moon Design System linear loader theming. - final MoonLinearLoaderTheme linearLoaderTheme; + final MoonLinearLoaderTheme linearLoader; /// Moon Design System linear progress theming. - final MoonLinearProgressTheme linearProgressTheme; + final MoonLinearProgressTheme linearProgress; /// Moon Design System opacities. final MoonOpacity opacity; @@ -98,68 +98,68 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { final MoonSizes sizes; /// Moon Design System tag theming. - final MoonTagTheme tagTheme; + final MoonTagTheme tag; /// Moon Design System tooltip theming. - final MoonTooltipTheme tooltipTheme; + final MoonTooltipTheme tooltip; /// Moon Design System typography. final MoonTypography typography; const MoonTheme({ - required this.avatarTheme, + required this.avatar, required this.borders, - required this.buttonTheme, - required this.chipTheme, - required this.circularLoaderTheme, - required this.circularProgressTheme, + required this.button, + required this.chip, + required this.circularLoader, + required this.circularProgress, required this.colors, required this.effects, - required this.linearLoaderTheme, - required this.linearProgressTheme, + required this.linearLoader, + required this.linearProgress, required this.opacity, required this.shadows, required this.sizes, - required this.tagTheme, - required this.tooltipTheme, + required this.tag, + required this.tooltip, required this.typography, }); @override MoonTheme copyWith({ - MoonAvatarTheme? avatarTheme, + MoonAvatarTheme? avatar, MoonBorders? borders, - MoonButtonTheme? buttonTheme, - MoonChipTheme? chipTheme, - MoonCircularLoaderTheme? circularLoaderTheme, - MoonCircularProgressTheme? circularProgressTheme, + MoonButtonTheme? button, + MoonChipTheme? chip, + MoonCircularLoaderTheme? circularLoader, + MoonCircularProgressTheme? circularProgress, MoonColors? colors, MoonEffects? effects, - MoonLinearLoaderTheme? linearLoaderTheme, - MoonLinearProgressTheme? linearProgressTheme, + MoonLinearLoaderTheme? linearLoader, + MoonLinearProgressTheme? linearProgress, MoonOpacity? opacity, MoonShadows? shadows, MoonSizes? sizes, - MoonTagTheme? tagTheme, - MoonTooltipTheme? tooltipTheme, + MoonTagTheme? tag, + MoonTooltipTheme? tooltip, MoonTypography? typography, }) { return MoonTheme( - avatarTheme: avatarTheme ?? this.avatarTheme, + avatar: avatar ?? this.avatar, borders: borders ?? this.borders, - buttonTheme: buttonTheme ?? this.buttonTheme, - chipTheme: chipTheme ?? this.chipTheme, - circularLoaderTheme: circularLoaderTheme ?? this.circularLoaderTheme, - circularProgressTheme: circularProgressTheme ?? this.circularProgressTheme, + button: button ?? this.button, + chip: chip ?? this.chip, + circularLoader: circularLoader ?? this.circularLoader, + circularProgress: circularProgress ?? this.circularProgress, colors: colors ?? this.colors, effects: effects ?? this.effects, - linearLoaderTheme: linearLoaderTheme ?? this.linearLoaderTheme, - linearProgressTheme: linearProgressTheme ?? this.linearProgressTheme, + linearLoader: linearLoader ?? this.linearLoader, + linearProgress: linearProgress ?? this.linearProgress, opacity: opacity ?? this.opacity, shadows: shadows ?? this.shadows, sizes: sizes ?? this.sizes, - tagTheme: tagTheme ?? this.tagTheme, - tooltipTheme: tooltipTheme ?? this.tooltipTheme, + tag: tag ?? this.tag, + tooltip: tooltip ?? this.tooltip, typography: typography ?? this.typography, ); } @@ -169,21 +169,21 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { if (other is! MoonTheme) return this; return MoonTheme( - avatarTheme: avatarTheme.lerp(other.avatarTheme, t), + avatar: avatar.lerp(other.avatar, t), borders: borders.lerp(other.borders, t), - buttonTheme: buttonTheme.lerp(other.buttonTheme, t), - chipTheme: chipTheme.lerp(other.chipTheme, t), - circularLoaderTheme: circularLoaderTheme.lerp(other.circularLoaderTheme, t), - circularProgressTheme: circularProgressTheme.lerp(other.circularProgressTheme, t), + button: button.lerp(other.button, t), + chip: chip.lerp(other.chip, t), + circularLoader: circularLoader.lerp(other.circularLoader, t), + circularProgress: circularProgress.lerp(other.circularProgress, t), colors: colors.lerp(other.colors, t), effects: effects.lerp(other.effects, t), - linearLoaderTheme: linearLoaderTheme.lerp(other.linearLoaderTheme, t), - linearProgressTheme: linearProgressTheme.lerp(other.linearProgressTheme, t), + linearLoader: linearLoader.lerp(other.linearLoader, t), + linearProgress: linearProgress.lerp(other.linearProgress, t), opacity: opacity.lerp(other.opacity, t), shadows: shadows.lerp(other.shadows, t), sizes: sizes.lerp(other.sizes, t), - tagTheme: tagTheme.lerp(other.tagTheme, t), - tooltipTheme: tooltipTheme.lerp(other.tooltipTheme, t), + tag: tag.lerp(other.tag, t), + tooltip: tooltip.lerp(other.tooltip, t), typography: typography.lerp(other.typography, t), ); } @@ -193,41 +193,32 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTheme")) - ..add(DiagnosticsProperty("MoonAvatarTheme", avatarTheme)) + ..add(DiagnosticsProperty("MoonAvatarTheme", avatar)) ..add(DiagnosticsProperty("MoonBorders", borders)) - ..add(DiagnosticsProperty("MoonButtonTheme", buttonTheme)) - ..add(DiagnosticsProperty("MoonChipTheme", chipTheme)) - ..add(DiagnosticsProperty("MoonCircularLoaderTheme", circularLoaderTheme)) - ..add(DiagnosticsProperty("MoonCircularProgressTheme", circularProgressTheme)) + ..add(DiagnosticsProperty("MoonButtonTheme", button)) + ..add(DiagnosticsProperty("MoonChipTheme", chip)) + ..add(DiagnosticsProperty("MoonCircularLoaderTheme", circularLoader)) + ..add(DiagnosticsProperty("MoonCircularProgressTheme", circularProgress)) ..add(DiagnosticsProperty("MoonColors", colors)) ..add(DiagnosticsProperty("MoonEffects", effects)) - ..add(DiagnosticsProperty("MoonLinearLoaderTheme", linearLoaderTheme)) - ..add(DiagnosticsProperty("MoonLinearProgressTheme", linearProgressTheme)) + ..add(DiagnosticsProperty("MoonLinearLoaderTheme", linearLoader)) + ..add(DiagnosticsProperty("MoonLinearProgressTheme", linearProgress)) ..add(DiagnosticsProperty("MoonOpacity", opacity)) ..add(DiagnosticsProperty("MoonShadows", shadows)) ..add(DiagnosticsProperty("MoonSizes", sizes)) - ..add(DiagnosticsProperty("MoonTagTheme", tagTheme)) - ..add(DiagnosticsProperty("MoonTooltipTheme", tooltipTheme)) + ..add(DiagnosticsProperty("MoonTagTheme", tag)) + ..add(DiagnosticsProperty("MoonTooltipTheme", tooltip)) ..add(DiagnosticsProperty("MoonTypography", typography)); } } extension MoonThemeX on BuildContext { MoonTheme? get moonTheme => Theme.of(this).extension(); - MoonAvatarTheme? get moonAvatarTheme => moonTheme?.avatarTheme; MoonBorders? get moonBorders => moonTheme?.borders; - MoonButtonTheme? get moonButtonTheme => moonTheme?.buttonTheme; - MoonChipTheme? get moonChipTheme => moonTheme?.chipTheme; - MoonCircularLoaderTheme? get moonCircularLoaderTheme => moonTheme?.circularLoaderTheme; - MoonCircularProgressTheme? get moonCircularProgressTheme => moonTheme?.circularProgressTheme; MoonColors? get moonColors => moonTheme?.colors; MoonEffects? get moonEffects => moonTheme?.effects; - MoonLinearLoaderTheme? get moonLinearLoaderTheme => moonTheme?.linearLoaderTheme; - MoonLinearProgressTheme? get moonLinearProgressTheme => moonTheme?.linearProgressTheme; MoonOpacity? get moonOpacity => moonTheme?.opacity; MoonShadows? get moonShadows => moonTheme?.shadows; MoonSizes? get moonSizes => moonTheme?.sizes; - MoonTagTheme? get moonTagTheme => moonTheme?.tagTheme; - MoonTooltipTheme? get moonTooltipTheme => moonTheme?.tooltipTheme; MoonTypography? get moonTypography => moonTheme?.typography; } diff --git a/lib/src/theme/tooltip/tooltip_colors.dart b/lib/src/theme/tooltip/tooltip_colors.dart new file mode 100644 index 00000000..d5d1466f --- /dev/null +++ b/lib/src/theme/tooltip/tooltip_colors.dart @@ -0,0 +1,46 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/colors.dart'; + +@immutable +class MoonTooltipColors extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonTooltipColors( + backgroundColor: MoonColors.light.gohan, + ); + + static final dark = MoonTooltipColors( + backgroundColor: MoonColors.dark.gohan, + ); + + /// Tooltip background color. + final Color backgroundColor; + + const MoonTooltipColors({ + required this.backgroundColor, + }); + + @override + MoonTooltipColors copyWith({Color? backgroundColor}) { + return MoonTooltipColors( + backgroundColor: backgroundColor ?? this.backgroundColor, + ); + } + + @override + MoonTooltipColors lerp(ThemeExtension? other, double t) { + if (other is! MoonTooltipColors) return this; + + return MoonTooltipColors( + backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonTooltipColors")) + ..add(ColorProperty("backgroundColor", backgroundColor)); + } +} diff --git a/lib/src/theme/tooltip/tooltip.dart b/lib/src/theme/tooltip/tooltip_properties.dart similarity index 86% rename from lib/src/theme/tooltip/tooltip.dart rename to lib/src/theme/tooltip/tooltip_properties.dart index 57ef8b86..a719bb8c 100644 --- a/lib/src/theme/tooltip/tooltip.dart +++ b/lib/src/theme/tooltip/tooltip_properties.dart @@ -8,8 +8,8 @@ import 'package:moon_design/src/theme/sizes.dart'; import 'package:moon_design/src/theme/typography/text_styles.dart'; @immutable -class MoonTooltipTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final tooltip = MoonTooltipTheme( +class MoonTooltipProperties extends ThemeExtension with DiagnosticableTreeMixin { + static final properties = MoonTooltipProperties( arrowBaseWidth: MoonSizes.sizes.x2s, arrowLength: MoonSizes.sizes.x4s, arrowTipDistance: MoonSizes.sizes.x4s, @@ -17,7 +17,7 @@ class MoonTooltipTheme extends ThemeExtension with Diagnostica borderRadius: MoonBorders.borders.interactiveXs, transitionDuration: const Duration(milliseconds: 150), transitionCurve: Curves.easeInOutCubic, - textStyle: MoonTextStyles.text.text12, + textStyle: MoonTextStyles.body.text12, ); /// The tooltip arrows base width. @@ -41,10 +41,10 @@ class MoonTooltipTheme extends ThemeExtension with Diagnostica /// Tooltip transition curve (fade in or out animation). final Curve transitionCurve; - /// Tooltip text style. + /// Tooltip body style. final TextStyle textStyle; - const MoonTooltipTheme({ + const MoonTooltipProperties({ required this.arrowBaseWidth, required this.arrowLength, required this.arrowTipDistance, @@ -56,7 +56,7 @@ class MoonTooltipTheme extends ThemeExtension with Diagnostica }); @override - MoonTooltipTheme copyWith({ + MoonTooltipProperties copyWith({ double? arrowBaseWidth, double? arrowLength, double? arrowTipDistance, @@ -66,7 +66,7 @@ class MoonTooltipTheme extends ThemeExtension with Diagnostica Curve? transitionCurve, TextStyle? textStyle, }) { - return MoonTooltipTheme( + return MoonTooltipProperties( arrowBaseWidth: arrowBaseWidth ?? this.arrowBaseWidth, arrowLength: arrowLength ?? this.arrowLength, arrowTipDistance: arrowTipDistance ?? this.arrowTipDistance, @@ -79,10 +79,10 @@ class MoonTooltipTheme extends ThemeExtension with Diagnostica } @override - MoonTooltipTheme lerp(ThemeExtension? other, double t) { - if (other is! MoonTooltipTheme) return this; + MoonTooltipProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonTooltipProperties) return this; - return MoonTooltipTheme( + return MoonTooltipProperties( arrowBaseWidth: lerpDouble(arrowBaseWidth, other.arrowBaseWidth, t)!, arrowLength: lerpDouble(arrowLength, other.arrowLength, t)!, arrowTipDistance: lerpDouble(arrowTipDistance, other.arrowTipDistance, t)!, @@ -98,7 +98,7 @@ class MoonTooltipTheme extends ThemeExtension with Diagnostica void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties - ..add(DiagnosticsProperty("type", "MoonTooltipTheme")) + ..add(DiagnosticsProperty("type", "MoonTooltipProperties")) ..add(DoubleProperty("arrowBaseWidth", arrowBaseWidth)) ..add(DoubleProperty("arrowLength", arrowLength)) ..add(DoubleProperty("arrowTipDistance", arrowTipDistance)) diff --git a/lib/src/theme/tooltip/tooltip_shadows.dart b/lib/src/theme/tooltip/tooltip_shadows.dart new file mode 100644 index 00000000..8c3e436e --- /dev/null +++ b/lib/src/theme/tooltip/tooltip_shadows.dart @@ -0,0 +1,46 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/shadows.dart'; + +@immutable +class MoonTooltipShadows extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonTooltipShadows( + tooltipShadows: MoonShadows.light.sm, + ); + + static final dark = MoonTooltipShadows( + tooltipShadows: MoonShadows.dark.sm, + ); + + /// Tooltip shadows. + final List tooltipShadows; + + const MoonTooltipShadows({ + required this.tooltipShadows, + }); + + @override + MoonTooltipShadows copyWith({List? tooltipShadows}) { + return MoonTooltipShadows( + tooltipShadows: tooltipShadows ?? this.tooltipShadows, + ); + } + + @override + MoonTooltipShadows lerp(ThemeExtension? other, double t) { + if (other is! MoonTooltipShadows) return this; + + return MoonTooltipShadows( + tooltipShadows: BoxShadow.lerpList(tooltipShadows, other.tooltipShadows, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonTooltipShadows")) + ..add(DiagnosticsProperty>("shadows", tooltipShadows)); + } +} diff --git a/lib/src/theme/tooltip/tooltip_theme.dart b/lib/src/theme/tooltip/tooltip_theme.dart new file mode 100644 index 00000000..de9e52f0 --- /dev/null +++ b/lib/src/theme/tooltip/tooltip_theme.dart @@ -0,0 +1,70 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/tooltip/tooltip_colors.dart'; +import 'package:moon_design/src/theme/tooltip/tooltip_properties.dart'; +import 'package:moon_design/src/theme/tooltip/tooltip_shadows.dart'; + +@immutable +class MoonTooltipTheme extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonTooltipTheme( + colors: MoonTooltipColors.light, + shadows: MoonTooltipShadows.light, + properties: MoonTooltipProperties.properties, + ); + + static final dark = MoonTooltipTheme( + colors: MoonTooltipColors.dark, + shadows: MoonTooltipShadows.dark, + properties: MoonTooltipProperties.properties, + ); + + /// Tooltip colors. + final MoonTooltipColors colors; + + /// Tooltip shadows. + final MoonTooltipShadows shadows; + + /// Tooltip properties. + final MoonTooltipProperties properties; + + const MoonTooltipTheme({ + required this.colors, + required this.shadows, + required this.properties, + }); + + @override + MoonTooltipTheme copyWith({ + MoonTooltipColors? colors, + MoonTooltipShadows? shadows, + MoonTooltipProperties? properties, + }) { + return MoonTooltipTheme( + colors: colors ?? this.colors, + shadows: shadows ?? this.shadows, + properties: properties ?? this.properties, + ); + } + + @override + MoonTooltipTheme lerp(ThemeExtension? other, double t) { + if (other is! MoonTooltipTheme) return this; + + return MoonTooltipTheme( + colors: colors.lerp(other.colors, t), + shadows: shadows.lerp(other.shadows, t), + properties: properties.lerp(other.properties, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { + super.debugFillProperties(diagnosticProperties); + diagnosticProperties + ..add(DiagnosticsProperty("type", "MoonTooltipTheme")) + ..add(DiagnosticsProperty("colors", colors)) + ..add(DiagnosticsProperty("shadows", shadows)) + ..add(DiagnosticsProperty("properties", properties)); + } +} diff --git a/lib/src/theme/typography/text_colors.dart b/lib/src/theme/typography/text_colors.dart new file mode 100644 index 00000000..f89e44ad --- /dev/null +++ b/lib/src/theme/typography/text_colors.dart @@ -0,0 +1,78 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/colors.dart'; + +@immutable +class MoonTextColors extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonTextColors( + bodyPrimary: MoonColors.light.bulma, + bodySecondary: MoonColors.light.trunks, + controlPrimary: MoonColors.light.goten, + controlSecondary: MoonColors.light.popo, + ); + + static final dark = MoonTextColors( + bodyPrimary: MoonColors.dark.bulma, + bodySecondary: MoonColors.dark.trunks, + controlPrimary: MoonColors.dark.goten, + controlSecondary: MoonColors.dark.popo, + ); + + /// Primary body text and icon color. + final Color bodyPrimary; + + /// Primary body text and icon color. + final Color bodySecondary; + + /// Primary control element (button, chip, etc) text and icon color. + final Color controlPrimary; + + /// Secondary control element (button, chip, etc) text and icon color. + final Color controlSecondary; + + const MoonTextColors({ + required this.bodyPrimary, + required this.bodySecondary, + required this.controlPrimary, + required this.controlSecondary, + }); + + @override + MoonTextColors copyWith({ + Color? bodyPrimary, + Color? bodySecondary, + Color? controlPrimary, + Color? controlSecondary, + }) { + return MoonTextColors( + bodyPrimary: bodyPrimary ?? this.bodyPrimary, + bodySecondary: bodySecondary ?? this.bodySecondary, + controlPrimary: controlPrimary ?? this.controlPrimary, + controlSecondary: controlSecondary ?? this.controlSecondary, + ); + } + + @override + MoonTextColors lerp(ThemeExtension? other, double t) { + if (other is! MoonTextColors) return this; + + return MoonTextColors( + bodyPrimary: Color.lerp(bodyPrimary, other.bodyPrimary, t)!, + bodySecondary: Color.lerp(bodySecondary, other.bodySecondary, t)!, + controlPrimary: Color.lerp(controlPrimary, other.controlPrimary, t)!, + controlSecondary: Color.lerp(controlSecondary, other.controlSecondary, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonTextColors")) + ..add(ColorProperty("bodyPrimary", bodyPrimary)) + ..add(ColorProperty("bodySecondary", bodySecondary)) + ..add(ColorProperty("controlPrimary", controlPrimary)) + ..add(ColorProperty("controlSecondary", controlSecondary)); + } +} diff --git a/lib/src/theme/typography/text_styles.dart b/lib/src/theme/typography/text_styles.dart index d589ea18..ec6d652c 100644 --- a/lib/src/theme/typography/text_styles.dart +++ b/lib/src/theme/typography/text_styles.dart @@ -3,75 +3,47 @@ import 'package:flutter/material.dart'; @immutable class MoonTextStyles extends ThemeExtension with DiagnosticableTreeMixin { - //static const _prefferredFont = "Averta"; - //static const _preferredFontPackage = "moon_design"; static const _semiBold = FontWeight.w600; - static const text = MoonTextStyles( + static const body = MoonTextStyles( text9: TextStyle( fontSize: 9, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text10: TextStyle( fontSize: 10, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text12: TextStyle( fontSize: 12, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text14: TextStyle( fontSize: 14, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text16: TextStyle( fontSize: 16, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text18: TextStyle( fontSize: 18, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text20: TextStyle( fontSize: 20, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text24: TextStyle( fontSize: 24, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text32: TextStyle( fontSize: 32, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text48: TextStyle( fontSize: 48, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text56: TextStyle( fontSize: 56, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text64: TextStyle( fontSize: 64, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text72: TextStyle( fontSize: 72, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), ); @@ -79,80 +51,54 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT text9: TextStyle( fontSize: 9, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text10: TextStyle( fontSize: 10, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text12: TextStyle( fontSize: 12, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text14: TextStyle( fontSize: 14, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text16: TextStyle( fontSize: 16, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text18: TextStyle( fontSize: 18, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text20: TextStyle( fontSize: 20, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text24: TextStyle( fontSize: 24, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text32: TextStyle( fontSize: 32, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text48: TextStyle( fontSize: 48, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text56: TextStyle( fontSize: 56, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text64: TextStyle( fontSize: 64, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), text72: TextStyle( fontSize: 72, fontWeight: _semiBold, - //fontFamily: _prefferredFont, - //package: _preferredFontPackage, ), ); diff --git a/lib/src/theme/typography/typography.dart b/lib/src/theme/typography/typography.dart index 4689ab85..420598c5 100644 --- a/lib/src/theme/typography/typography.dart +++ b/lib/src/theme/typography/typography.dart @@ -1,34 +1,48 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; +import 'package:moon_design/src/theme/typography/text_colors.dart'; import 'package:moon_design/src/theme/typography/text_styles.dart'; @immutable class MoonTypography extends ThemeExtension with DiagnosticableTreeMixin { - static const textStyles = MoonTypography( - text: MoonTextStyles.text, + static final light = MoonTypography( + body: MoonTextStyles.body, heading: MoonTextStyles.heading, + colors: MoonTextColors.light, ); - /// Styles for text. - final MoonTextStyles text; + static final dark = MoonTypography( + body: MoonTextStyles.body, + heading: MoonTextStyles.heading, + colors: MoonTextColors.dark, + ); + + /// Styles for body text. + final MoonTextStyles body; /// Styles for headings. final MoonTextStyles heading; + /// Colors for body and icons. + final MoonTextColors colors; + const MoonTypography({ - required this.text, + required this.body, required this.heading, + required this.colors, }); @override MoonTypography copyWith({ - MoonTextStyles? text, + MoonTextStyles? body, MoonTextStyles? heading, + MoonTextColors? colors, }) { return MoonTypography( - text: text ?? this.text, + body: body ?? this.body, heading: heading ?? this.heading, + colors: colors ?? this.colors, ); } @@ -37,8 +51,9 @@ class MoonTypography extends ThemeExtension with DiagnosticableT if (other is! MoonTypography) return this; return MoonTypography( - text: text.lerp(other.text, t), + body: body.lerp(other.body, t), heading: heading.lerp(other.heading, t), + colors: colors.lerp(other.colors, t), ); } @@ -47,7 +62,8 @@ class MoonTypography extends ThemeExtension with DiagnosticableT super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTypography")) - ..add(DiagnosticsProperty("text", text)) - ..add(DiagnosticsProperty("heading", heading)); + ..add(DiagnosticsProperty("body", body)) + ..add(DiagnosticsProperty("heading", heading)) + ..add(DiagnosticsProperty("colors", colors)); } } diff --git a/lib/src/widgets/avatar/avatar.dart b/lib/src/widgets/avatar/avatar.dart index fe1324b4..69f4ef2c 100644 --- a/lib/src/widgets/avatar/avatar.dart +++ b/lib/src/widgets/avatar/avatar.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/avatar/avatar_sizes.dart'; +import 'package:moon_design/src/theme/avatar/avatar_size_properties.dart'; import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/utils/extensions.dart'; @@ -115,27 +115,31 @@ class MoonAvatar extends StatelessWidget { } } - MoonAvatarSizes _getMoonAvatarSize(BuildContext context, MoonAvatarSize? moonAvatarSize) { + MoonAvatarSizeProperties _getMoonAvatarSize(BuildContext context, MoonAvatarSize? moonAvatarSize) { switch (moonAvatarSize) { case MoonAvatarSize.xs: - return context.moonTheme?.avatarTheme.xs ?? MoonAvatarSizes.xs; + return context.moonTheme?.avatar.sizes.xs ?? MoonAvatarSizeProperties.xs; case MoonAvatarSize.sm: - return context.moonTheme?.avatarTheme.sm ?? MoonAvatarSizes.sm; + return context.moonTheme?.avatar.sizes.sm ?? MoonAvatarSizeProperties.sm; case MoonAvatarSize.md: - return context.moonTheme?.avatarTheme.md ?? MoonAvatarSizes.md; + return context.moonTheme?.avatar.sizes.md ?? MoonAvatarSizeProperties.md; case MoonAvatarSize.lg: - return context.moonTheme?.avatarTheme.lg ?? MoonAvatarSizes.lg; + return context.moonTheme?.avatar.sizes.lg ?? MoonAvatarSizeProperties.lg; case MoonAvatarSize.xl: - return context.moonTheme?.avatarTheme.xl ?? MoonAvatarSizes.xl; + return context.moonTheme?.avatar.sizes.xl ?? MoonAvatarSizeProperties.xl; case MoonAvatarSize.x2l: - return context.moonTheme?.avatarTheme.x2l ?? MoonAvatarSizes.x2l; + return context.moonTheme?.avatar.sizes.x2l ?? MoonAvatarSizeProperties.x2l; default: - return context.moonTheme?.avatarTheme.md ?? MoonAvatarSizes.md; + return context.moonTheme?.avatar.sizes.md ?? MoonAvatarSizeProperties.md; } } - Color _getTextColor({required bool isDarkMode, required Color backgroundColor}) { - final backgroundLuminance = backgroundColor.computeLuminance(); + Color _getTextColor(BuildContext context, {required bool isDarkMode, required Color effectiveBackgroundColor}) { + if (backgroundColor == null && context.moonTypography != null) { + return context.moonTypography!.colors.bodyPrimary; + } + + final backgroundLuminance = effectiveBackgroundColor.computeLuminance(); if (backgroundLuminance > 0.5) { return MoonColors.light.bulma; } else { @@ -145,7 +149,16 @@ class MoonAvatar extends StatelessWidget { @override Widget build(BuildContext context) { - final MoonAvatarSizes effectiveMoonAvatarSize = _getMoonAvatarSize(context, avatarSize); + final Color effectiveBackgroundColor = + backgroundColor ?? context.moonTheme?.avatar.colors.backgroundColor ?? MoonColors.light.gohan; + + final Color effectiveBadgeColor = + badgeColor ?? context.moonTheme?.avatar.colors.badgeColor ?? MoonColors.light.roshi100; + + final Color effectiveTextColor = textColor ?? + _getTextColor(context, isDarkMode: context.isDarkMode, effectiveBackgroundColor: effectiveBackgroundColor); + + final MoonAvatarSizeProperties effectiveMoonAvatarSize = _getMoonAvatarSize(context, avatarSize); final double effectiveAvatarWidth = width ?? effectiveMoonAvatarSize.avatarSizeValue; final double effectiveAvatarHeight = height ?? effectiveMoonAvatarSize.avatarSizeValue; @@ -156,12 +169,6 @@ class MoonAvatar extends StatelessWidget { final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonAvatarSize.borderRadius; final double avatarBorderRadiusValue = maxBorderRadius(effectiveBorderRadius); - final Color effectiveBackgroundColor = backgroundColor ?? context.moonColors?.gohan ?? MoonColors.light.gohan; - final Color effectiveBadgeColor = badgeColor ?? context.moonColors?.roshi100 ?? MoonColors.light.roshi100; - - final Color effectiveTextColor = - textColor ?? _getTextColor(isDarkMode: context.isDarkMode, backgroundColor: effectiveBackgroundColor); - return Semantics( label: semanticLabel, button: false, diff --git a/lib/src/widgets/buttons/button.dart b/lib/src/widgets/buttons/button.dart index e8a0c5d9..67c0acfa 100644 --- a/lib/src/widgets/buttons/button.dart +++ b/lib/src/widgets/buttons/button.dart @@ -2,12 +2,12 @@ import 'package:figma_squircle/figma_squircle.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/button/button_sizes.dart'; +import 'package:moon_design/src/theme/button/button_size_properties.dart'; import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/effects/hover_effects.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/utils/animated_icon_theme.dart'; import 'package:moon_design/src/utils/extensions.dart'; +import 'package:moon_design/src/widgets/common/animated_icon_theme.dart'; import 'package:moon_design/src/widgets/common/base_control.dart'; enum MoonButtonSize { @@ -298,27 +298,31 @@ class MoonButton extends StatelessWidget { bool get _isEnabled => onTap != null || onLongPress != null; - MoonButtonSizes _getMoonButtonSize(BuildContext context, MoonButtonSize? moonButtonSize) { + MoonButtonSizeProperties _getMoonButtonSize(BuildContext context, MoonButtonSize? moonButtonSize) { switch (moonButtonSize) { case MoonButtonSize.xs: - return context.moonTheme?.buttonTheme.xs ?? MoonButtonSizes.xs; + return context.moonTheme?.button.sizes.xs ?? MoonButtonSizeProperties.xs; case MoonButtonSize.sm: - return context.moonTheme?.buttonTheme.sm ?? MoonButtonSizes.sm; + return context.moonTheme?.button.sizes.sm ?? MoonButtonSizeProperties.sm; case MoonButtonSize.md: - return context.moonTheme?.buttonTheme.md ?? MoonButtonSizes.md; + return context.moonTheme?.button.sizes.md ?? MoonButtonSizeProperties.md; case MoonButtonSize.lg: - return context.moonTheme?.buttonTheme.lg ?? MoonButtonSizes.lg; + return context.moonTheme?.button.sizes.lg ?? MoonButtonSizeProperties.lg; case MoonButtonSize.xl: - return context.moonTheme?.buttonTheme.xl ?? MoonButtonSizes.xl; + return context.moonTheme?.button.sizes.xl ?? MoonButtonSizeProperties.xl; default: - return context.moonTheme?.buttonTheme.md ?? MoonButtonSizes.md; + return context.moonTheme?.button.sizes.md ?? MoonButtonSizeProperties.md; } } - Color _getTextColor({required bool isDarkMode, required bool isHovered, required bool isFocused}) { + Color _getTextColor( + BuildContext context, { + required bool isDarkMode, + required bool isHovered, + required bool isFocused, + }) { if (textColor != null && (!isHovered && !isFocused)) return textColor!; - if (backgroundColor == null && isDarkMode) return MoonColors.dark.bulma; - if (backgroundColor == null && !isDarkMode) return MoonColors.light.bulma; + if (backgroundColor == null && context.moonTypography != null) return context.moonTypography!.colors.bodyPrimary; final backgroundLuminance = backgroundColor!.computeLuminance(); if (backgroundLuminance > 0.5) { @@ -330,11 +334,10 @@ class MoonButton extends StatelessWidget { @override Widget build(BuildContext context) { - final MoonButtonSizes effectiveMoonButtonSize = _getMoonButtonSize(context, buttonSize); + final MoonButtonSizeProperties effectiveMoonButtonSize = _getMoonButtonSize(context, buttonSize); final double effectiveHeight = height ?? effectiveMoonButtonSize.height; final double effectiveGap = gap ?? effectiveMoonButtonSize.gap; - final EdgeInsets effectivePadding = padding ?? effectiveMoonButtonSize.padding; final EdgeInsetsDirectional correctedPadding = EdgeInsetsDirectional.fromSTEB( @@ -344,8 +347,10 @@ class MoonButton extends StatelessWidget { effectivePadding.bottom, ); + final Color effectiveBorderColor = + borderColor ?? context.moonTheme?.button.colors.borderColor ?? MoonColors.light.trunks; final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonButtonSize.borderRadius; - final Color effectiveBorderColor = borderColor ?? context.moonColors?.trunks ?? MoonColors.light.trunks; + final double effectiveBorderWidth = borderWidth ?? context.moonBorders?.borderWidth ?? MoonBorders.borders.borderWidth; @@ -353,6 +358,8 @@ class MoonButton extends StatelessWidget { context.moonEffects?.controlHoverEffect.primaryHoverColor ?? MoonHoverEffects.lightHoverEffect.primaryHoverColor; + final Color hoverColor = Color.alphaBlend(effectiveHoverEffectColor, backgroundColor ?? Colors.transparent); + final Curve effectiveHoverEffectCurve = hoverEffectCurve ?? context.moonEffects?.controlHoverEffect.hoverCurve ?? MoonHoverEffects.lightHoverEffect.hoverCurve; @@ -361,8 +368,6 @@ class MoonButton extends StatelessWidget { context.moonEffects?.controlHoverEffect.hoverDuration ?? MoonHoverEffects.lightHoverEffect.hoverDuration; - final Color hoverColor = Color.alphaBlend(effectiveHoverEffectColor, backgroundColor ?? Colors.transparent); - return MoonBaseControl( onTap: onTap, onLongPress: onLongPress, @@ -395,7 +400,7 @@ class MoonButton extends StatelessWidget { pulseEffectCurve: pulseEffectCurve, builder: (context, isEnabled, isHovered, isFocused, isPressed) { final Color effectiveTextColor = - _getTextColor(isDarkMode: context.isDarkMode, isHovered: isHovered, isFocused: isFocused); + _getTextColor(context, isDarkMode: context.isDarkMode, isHovered: isHovered, isFocused: isFocused); final bool canAnimateHover = _isEnabled && (isHovered || isFocused || isPressed); diff --git a/lib/src/widgets/buttons/ghost_button.dart b/lib/src/widgets/buttons/ghost_button.dart index 18a457c2..7e10cb89 100644 --- a/lib/src/widgets/buttons/ghost_button.dart +++ b/lib/src/widgets/buttons/ghost_button.dart @@ -91,10 +91,11 @@ class MoonGhostButton extends StatelessWidget { @override Widget build(BuildContext context) { - final effectiveTextColor = context.moonColors?.trunks ?? MoonColors.light.trunks; - final effectiveHoverColor = context.moonColors?.jiren ?? MoonColors.light.jiren; - final effectiveFocusColor = context.moonColors?.piccolo.withOpacity(context.isDarkMode ? 0.8 : 0.2) ?? - MoonColors.light.piccolo.withOpacity(context.isDarkMode ? 0.8 : 0.2); + final effectiveTextColor = context.moonTheme?.button.colors.ghostTextColor ?? MoonColors.light.trunks; + final effectiveHoverColor = context.moonTheme?.button.colors.ghostHoverColor ?? MoonColors.light.jiren; + final effectiveFocusColor = + context.moonTheme?.button.colors.ghostFocusColor.withOpacity(context.isDarkMode ? 0.8 : 0.2) ?? + MoonColors.light.piccolo.withOpacity(context.isDarkMode ? 0.8 : 0.2); return MoonButton( onTap: onTap, diff --git a/lib/src/widgets/buttons/primary_button.dart b/lib/src/widgets/buttons/primary_button.dart index ee78326f..3ba18ec7 100644 --- a/lib/src/widgets/buttons/primary_button.dart +++ b/lib/src/widgets/buttons/primary_button.dart @@ -4,13 +4,6 @@ import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; -/// MDS primary button variant. -/// -/// See also: -/// -/// * [MoonSecondaryButton], MDS secondary button. -/// * [MoonTertiaryButton], MDS tertiary button. -/// * [MoonGhostButton], MDS ghost button. class MoonPrimaryButton extends StatelessWidget { /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; @@ -66,6 +59,13 @@ class MoonPrimaryButton extends StatelessWidget { /// The widget in the right icon slot of the button. final Widget? rightIcon; + /// MDS primary button variant. + /// + /// See also: + /// + /// * [MoonSecondaryButton], MDS secondary button. + /// * [MoonTertiaryButton], MDS tertiary button. + /// * [MoonGhostButton], MDS ghost button. const MoonPrimaryButton({ super.key, this.onTap, @@ -90,7 +90,8 @@ class MoonPrimaryButton extends StatelessWidget { @override Widget build(BuildContext context) { - final effectiveBackgroundColor = context.moonColors?.piccolo ?? MoonColors.light.piccolo; + final effectiveBackgroundColor = + context.moonTheme?.button.colors.primaryBackgroundColor ?? MoonColors.light.piccolo; return MoonButton( onTap: onTap, diff --git a/lib/src/widgets/buttons/tertiary_button.dart b/lib/src/widgets/buttons/tertiary_button.dart index d02b4843..7c08e7c4 100644 --- a/lib/src/widgets/buttons/tertiary_button.dart +++ b/lib/src/widgets/buttons/tertiary_button.dart @@ -90,15 +90,13 @@ class MoonTertiaryButton extends StatelessWidget { @override Widget build(BuildContext context) { - final effectiveBackgroundColor = context.moonColors?.hit ?? MoonColors.light.hit; - final effectiveBorderColor = context.moonColors?.hit ?? MoonColors.light.hit; + final effectiveBackgroundColor = context.moonTheme?.button.colors.tertiaryBackgroundColor ?? MoonColors.light.hit; return MoonButton( onTap: onTap, onLongPress: onLongPress, buttonSize: buttonSize, backgroundColor: effectiveBackgroundColor, - borderColor: effectiveBorderColor, focusNode: focusNode, semanticLabel: semanticLabel, tooltipMessage: tooltipMessage, diff --git a/lib/src/widgets/chips/chip.dart b/lib/src/widgets/chips/chip.dart index 86dbd73f..4992118b 100644 --- a/lib/src/widgets/chips/chip.dart +++ b/lib/src/widgets/chips/chip.dart @@ -2,13 +2,13 @@ import 'package:figma_squircle/figma_squircle.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/chip/chip_sizes.dart'; +import 'package:moon_design/src/theme/chip/chip_size_properties.dart'; import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/effects/hover_effects.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/utils/animated_icon_theme.dart'; -import 'package:moon_design/src/utils/corrected_color_container.dart'; +import 'package:moon_design/src/widgets/common/animated_icon_theme.dart'; import 'package:moon_design/src/widgets/common/base_control.dart'; +import 'package:moon_design/src/widgets/common/corrected_color_container.dart'; enum MoonChipSize { sm, @@ -160,15 +160,15 @@ class MoonChip extends StatelessWidget { this.rightIcon, }); - MoonChipSizes _getMoonChipSize(BuildContext context, MoonChipSize? moonChipSize) { + MoonChipSizeProperties _getMoonChipSize(BuildContext context, MoonChipSize? moonChipSize) { switch (moonChipSize) { case MoonChipSize.sm: - return context.moonTheme?.chipTheme.sm ?? MoonChipSizes.sm; + return context.moonTheme?.chip.sizes.sm ?? MoonChipSizeProperties.sm; case MoonChipSize.md: - return context.moonTheme?.chipTheme.md ?? MoonChipSizes.md; + return context.moonTheme?.chip.sizes.md ?? MoonChipSizeProperties.md; default: - return context.moonTheme?.chipTheme.md ?? MoonChipSizes.sm; + return context.moonTheme?.chip.sizes.md ?? MoonChipSizeProperties.sm; } } @@ -194,11 +194,16 @@ class MoonChip extends StatelessWidget { @override Widget build(BuildContext context) { - final MoonChipSizes effectiveMoonChipSize = _getMoonChipSize(context, chipSize); + final Color effectiveActiveColor = + activeColor ?? context.moonTheme?.chip.colors.activeColor ?? MoonColors.light.piccolo; + + final Color effectiveBackgroundColor = + backgroundColor ?? context.moonTheme?.chip.colors.backgroundColor ?? MoonColors.light.gohan; + + final MoonChipSizeProperties effectiveMoonChipSize = _getMoonChipSize(context, chipSize); final double effectiveHeight = height ?? effectiveMoonChipSize.height; final double effectiveGap = gap ?? effectiveMoonChipSize.gap; - final EdgeInsets effectivePadding = padding ?? effectiveMoonChipSize.padding; final EdgeInsetsDirectional correctedPadding = EdgeInsetsDirectional.fromSTEB( @@ -209,13 +214,10 @@ class MoonChip extends StatelessWidget { ); final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonChipSize.borderRadius; + final double effectiveBorderWidth = borderWidth ?? context.moonBorders?.borderWidth ?? MoonBorders.borders.borderWidth; - final Color effectiveActiveColor = activeColor ?? context.moonColors?.piccolo ?? MoonColors.light.piccolo; - - final Color effectiveBackgroundColor = backgroundColor ?? context.moonColors?.gohan ?? MoonColors.light.gohan; - final Color effectiveHoverEffectColor = hoverEffectColor ?? context.moonEffects?.controlHoverEffect.secondaryHoverColor ?? MoonHoverEffects.lightHoverEffect.secondaryHoverColor; diff --git a/lib/src/widgets/chips/ghost_chip.dart b/lib/src/widgets/chips/ghost_chip.dart index e7206036..79c480b1 100644 --- a/lib/src/widgets/chips/ghost_chip.dart +++ b/lib/src/widgets/chips/ghost_chip.dart @@ -147,7 +147,7 @@ class MoonGhostChip extends StatelessWidget { @override Widget build(BuildContext context) { - final effectiveTextColor = textColor ?? context.moonColors?.bulma ?? MoonColors.light.bulma; + final effectiveTextColor = textColor ?? context.moonTypography?.colors.bodyPrimary ?? MoonColors.light.bulma; return MoonChip( key: key, diff --git a/lib/src/utils/animated_icon_theme.dart b/lib/src/widgets/common/animated_icon_theme.dart similarity index 100% rename from lib/src/utils/animated_icon_theme.dart rename to lib/src/widgets/common/animated_icon_theme.dart diff --git a/lib/src/widgets/common/base_control.dart b/lib/src/widgets/common/base_control.dart index 7483fc24..b118cccc 100644 --- a/lib/src/widgets/common/base_control.dart +++ b/lib/src/widgets/common/base_control.dart @@ -6,8 +6,8 @@ import 'package:moon_design/src/theme/opacity.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/touch_target_padding.dart'; -import 'package:moon_design/src/widgets/effects/focus_effect.dart'; -import 'package:moon_design/src/widgets/effects/pulse_effect.dart'; +import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; +import 'package:moon_design/src/widgets/common/effects/pulse_effect.dart'; import 'package:moon_design/src/widgets/tooltip/tooltip.dart'; typedef MoonBaseControlBuilder = Widget Function( diff --git a/lib/src/utils/corrected_color_container.dart b/lib/src/widgets/common/corrected_color_container.dart similarity index 100% rename from lib/src/utils/corrected_color_container.dart rename to lib/src/widgets/common/corrected_color_container.dart diff --git a/lib/src/widgets/effects/focus_effect.dart b/lib/src/widgets/common/effects/focus_effect.dart similarity index 95% rename from lib/src/widgets/effects/focus_effect.dart rename to lib/src/widgets/common/effects/focus_effect.dart index 5f732c59..fb7b1834 100644 --- a/lib/src/widgets/effects/focus_effect.dart +++ b/lib/src/widgets/common/effects/focus_effect.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/max_border_radius.dart'; -import 'package:moon_design/src/widgets/effects/painters/focus_effect_painter.dart'; +import 'package:moon_design/src/widgets/common/effects/painters/focus_effect_painter.dart'; class MoonFocusEffect extends StatefulWidget { final bool show; diff --git a/lib/src/widgets/effects/painters/focus_effect_painter.dart b/lib/src/widgets/common/effects/painters/focus_effect_painter.dart similarity index 100% rename from lib/src/widgets/effects/painters/focus_effect_painter.dart rename to lib/src/widgets/common/effects/painters/focus_effect_painter.dart diff --git a/lib/src/widgets/effects/painters/pulse_effect_painter.dart b/lib/src/widgets/common/effects/painters/pulse_effect_painter.dart similarity index 100% rename from lib/src/widgets/effects/painters/pulse_effect_painter.dart rename to lib/src/widgets/common/effects/painters/pulse_effect_painter.dart diff --git a/lib/src/widgets/effects/pulse_effect.dart b/lib/src/widgets/common/effects/pulse_effect.dart similarity index 97% rename from lib/src/widgets/effects/pulse_effect.dart rename to lib/src/widgets/common/effects/pulse_effect.dart index 2c31157f..71aa20a4 100644 --- a/lib/src/widgets/effects/pulse_effect.dart +++ b/lib/src/widgets/common/effects/pulse_effect.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/max_border_radius.dart'; -import 'package:moon_design/src/widgets/effects/painters/pulse_effect_painter.dart'; +import 'package:moon_design/src/widgets/common/effects/painters/pulse_effect_painter.dart'; class MoonPulseEffect extends StatefulWidget { final bool show; diff --git a/lib/src/widgets/common/icons.dart b/lib/src/widgets/common/icons/icons.dart similarity index 100% rename from lib/src/widgets/common/icons.dart rename to lib/src/widgets/common/icons/icons.dart diff --git a/lib/src/widgets/loaders/circular_loader.dart b/lib/src/widgets/loaders/circular_loader.dart index 329d8241..8b0a54ca 100644 --- a/lib/src/widgets/loaders/circular_loader.dart +++ b/lib/src/widgets/loaders/circular_loader.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; -import 'package:moon_design/src/theme/loaders/circular_loader_sizes.dart'; +import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_size_properties.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/circular_progress_indicator.dart'; @@ -31,32 +31,35 @@ class MoonCircularLoader extends StatelessWidget { this.backgroundColor, }); - MoonCircularLoaderSizes _getMoonLoaderSize(BuildContext context, MoonCircularLoaderSize? moonLoaderSize) { + MoonCircularLoaderSizeProperties _getMoonLoaderSize(BuildContext context, MoonCircularLoaderSize? moonLoaderSize) { switch (moonLoaderSize) { case MoonCircularLoaderSize.x2s: - return context.moonTheme?.circularLoaderTheme.x2s ?? MoonCircularLoaderSizes.x2s; + return context.moonTheme?.circularLoader.sizes.x2s ?? MoonCircularLoaderSizeProperties.x2s; case MoonCircularLoaderSize.xs: - return context.moonTheme?.circularLoaderTheme.xs ?? MoonCircularLoaderSizes.xs; + return context.moonTheme?.circularLoader.sizes.xs ?? MoonCircularLoaderSizeProperties.xs; case MoonCircularLoaderSize.sm: - return context.moonTheme?.circularLoaderTheme.sm ?? MoonCircularLoaderSizes.sm; + return context.moonTheme?.circularLoader.sizes.sm ?? MoonCircularLoaderSizeProperties.sm; case MoonCircularLoaderSize.md: - return context.moonTheme?.circularLoaderTheme.md ?? MoonCircularLoaderSizes.md; + return context.moonTheme?.circularLoader.sizes.md ?? MoonCircularLoaderSizeProperties.md; case MoonCircularLoaderSize.lg: - return context.moonTheme?.circularLoaderTheme.lg ?? MoonCircularLoaderSizes.lg; + return context.moonTheme?.circularLoader.sizes.lg ?? MoonCircularLoaderSizeProperties.lg; default: - return context.moonTheme?.circularLoaderTheme.md ?? MoonCircularLoaderSizes.md; + return context.moonTheme?.circularLoader.sizes.md ?? MoonCircularLoaderSizeProperties.md; } } @override Widget build(BuildContext context) { - final MoonCircularLoaderSizes effectiveLoaderSize = _getMoonLoaderSize(context, loaderSize); + final Color effectiveColor = color ?? context.moonTheme?.circularLoader.colors.color ?? MoonColors.light.hit; + final Color effectiveBackgroundColor = + backgroundColor ?? context.moonTheme?.circularLoader.colors.backgroundColor ?? MoonColors.light.trunks; + + final StrokeCap effectiveStrokeCap = strokeCap ?? StrokeCap.round; + + final MoonCircularLoaderSizeProperties effectiveLoaderSize = _getMoonLoaderSize(context, loaderSize); final double effectiveSize = sizeValue ?? effectiveLoaderSize.loaderSizeValue; final double effectiveStrokeWidth = strokeWidth ?? effectiveLoaderSize.loaderStrokeWidth; - final Color effectiveColor = color ?? context.moonColors?.hit ?? MoonColors.light.hit; - final Color effectiveBackgroundColor = backgroundColor ?? context.moonColors?.trunks ?? MoonColors.light.trunks; - final StrokeCap effectiveStrokeCap = strokeCap ?? StrokeCap.round; return SizedBox( height: effectiveSize, diff --git a/lib/src/widgets/loaders/linear_loader.dart b/lib/src/widgets/loaders/linear_loader.dart index 4c679922..5f4ac563 100644 --- a/lib/src/widgets/loaders/linear_loader.dart +++ b/lib/src/widgets/loaders/linear_loader.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; -import 'package:moon_design/src/theme/loaders/linear_loader_sizes.dart'; +import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_size_properties.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/linear_progress_indicator.dart'; @@ -29,31 +29,33 @@ class MoonLinearLoader extends StatelessWidget { this.borderRadiusValue, }); - MoonLinearLoaderSizes _getMoonLoaderSize(BuildContext context, MoonLinearLoaderSize? moonLoaderSize) { + MoonLinearLoaderSizeProperties _getMoonLoaderSize(BuildContext context, MoonLinearLoaderSize? moonLoaderSize) { switch (moonLoaderSize) { case MoonLinearLoaderSize.x6s: - return context.moonTheme?.linearLoaderTheme.x6s ?? MoonLinearLoaderSizes.x6s; + return context.moonTheme?.linearLoader.sizes.x6s ?? MoonLinearLoaderSizeProperties.x6s; case MoonLinearLoaderSize.x5s: - return context.moonTheme?.linearLoaderTheme.x5s ?? MoonLinearLoaderSizes.x5s; + return context.moonTheme?.linearLoader.sizes.x5s ?? MoonLinearLoaderSizeProperties.x5s; case MoonLinearLoaderSize.x4s: - return context.moonTheme?.linearLoaderTheme.x4s ?? MoonLinearLoaderSizes.x4s; + return context.moonTheme?.linearLoader.sizes.x4s ?? MoonLinearLoaderSizeProperties.x4s; case MoonLinearLoaderSize.x3s: - return context.moonTheme?.linearLoaderTheme.x3s ?? MoonLinearLoaderSizes.x3s; + return context.moonTheme?.linearLoader.sizes.x3s ?? MoonLinearLoaderSizeProperties.x3s; case MoonLinearLoaderSize.x2s: - return context.moonTheme?.linearLoaderTheme.x2s ?? MoonLinearLoaderSizes.x2s; + return context.moonTheme?.linearLoader.sizes.x2s ?? MoonLinearLoaderSizeProperties.x2s; default: - return context.moonTheme?.linearLoaderTheme.x4s ?? MoonLinearLoaderSizes.x4s; + return context.moonTheme?.linearLoader.sizes.x4s ?? MoonLinearLoaderSizeProperties.x4s; } } @override Widget build(BuildContext context) { - final MoonLinearLoaderSizes effectiveLoaderSize = _getMoonLoaderSize(context, loaderSize); + final Color effectiveColor = color ?? context.moonTheme?.linearLoader.colors.color ?? MoonColors.light.hit; + final Color effectiveBackgroundColor = + backgroundColor ?? context.moonTheme?.linearLoader.colors.backgroundColor ?? MoonColors.light.trunks; + + final MoonLinearLoaderSizeProperties effectiveLoaderSize = _getMoonLoaderSize(context, loaderSize); final double effectiveBorderRadiusValue = borderRadiusValue ?? effectiveLoaderSize.borderRadiusValue; final double effectiveHeight = height ?? effectiveLoaderSize.loaderHeight; - final Color effectiveColor = color ?? context.moonColors?.hit ?? MoonColors.light.hit; - final Color effectiveBackgroundColor = backgroundColor ?? context.moonColors?.trunks ?? MoonColors.light.trunks; return MoonLinearProgressIndicator( borderRadiusValue: effectiveBorderRadiusValue, diff --git a/lib/src/widgets/progress/circular_progress.dart b/lib/src/widgets/progress/circular_progress.dart index ac92b4ef..f985d37c 100644 --- a/lib/src/widgets/progress/circular_progress.dart +++ b/lib/src/widgets/progress/circular_progress.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; -import 'package:moon_design/src/theme/progress/circular_progress_sizes.dart'; +import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_size_properties.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/circular_progress_indicator.dart'; @@ -33,36 +33,39 @@ class MoonCircularProgress extends StatelessWidget { this.strokeCap, }); - MoonCircularProgressSizes _getMoonCircularProgressSize( + MoonCircularProgressSizeProperties _getMoonCircularProgressSize( BuildContext context, MoonCircularProgressSize? moonCircularProgressSize, ) { switch (moonCircularProgressSize) { case MoonCircularProgressSize.x2s: - return context.moonTheme?.circularProgressTheme.x2s ?? MoonCircularProgressSizes.x2s; + return context.moonTheme?.circularProgress.sizes.x2s ?? MoonCircularProgressSizeProperties.x2s; case MoonCircularProgressSize.xs: - return context.moonTheme?.circularProgressTheme.xs ?? MoonCircularProgressSizes.xs; + return context.moonTheme?.circularProgress.sizes.xs ?? MoonCircularProgressSizeProperties.xs; case MoonCircularProgressSize.sm: - return context.moonTheme?.circularProgressTheme.sm ?? MoonCircularProgressSizes.sm; + return context.moonTheme?.circularProgress.sizes.sm ?? MoonCircularProgressSizeProperties.sm; case MoonCircularProgressSize.md: - return context.moonTheme?.circularProgressTheme.md ?? MoonCircularProgressSizes.md; + return context.moonTheme?.circularProgress.sizes.md ?? MoonCircularProgressSizeProperties.md; case MoonCircularProgressSize.lg: - return context.moonTheme?.circularProgressTheme.lg ?? MoonCircularProgressSizes.lg; + return context.moonTheme?.circularProgress.sizes.lg ?? MoonCircularProgressSizeProperties.lg; default: - return context.moonTheme?.circularProgressTheme.md ?? MoonCircularProgressSizes.md; + return context.moonTheme?.circularProgress.sizes.md ?? MoonCircularProgressSizeProperties.md; } } @override Widget build(BuildContext context) { - final MoonCircularProgressSizes effectiveMoonCircularProgressSize = + final Color effectiveColor = color ?? context.moonTheme?.circularProgress.colors.color ?? MoonColors.light.piccolo; + final Color effectiveBackgroundColor = + backgroundColor ?? context.moonTheme?.circularProgress.colors.backgroundColor ?? MoonColors.light.trunks; + + final StrokeCap effectiveStrokeCap = strokeCap ?? StrokeCap.round; + + final MoonCircularProgressSizeProperties effectiveMoonCircularProgressSize = _getMoonCircularProgressSize(context, circularProgressSize); final double effectiveSize = sizeValue ?? effectiveMoonCircularProgressSize.progressSizeValue; final double effectiveStrokeWidth = strokeWidth ?? effectiveMoonCircularProgressSize.progressStrokeWidth; - final Color effectiveColor = color ?? context.moonColors?.hit ?? MoonColors.light.hit; - final Color effectiveBackgroundColor = backgroundColor ?? context.moonColors?.trunks ?? MoonColors.light.trunks; - final StrokeCap effectiveStrokeCap = strokeCap ?? StrokeCap.round; return SizedBox( height: effectiveSize, diff --git a/lib/src/widgets/progress/linear_progress.dart b/lib/src/widgets/progress/linear_progress.dart index 4323cd21..bff556dd 100644 --- a/lib/src/widgets/progress/linear_progress.dart +++ b/lib/src/widgets/progress/linear_progress.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; -import 'package:moon_design/src/theme/progress/linear_progress_sizes.dart'; +import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_size_properties.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/linear_progress_indicator.dart'; @@ -31,31 +31,36 @@ class MoonLinearProgress extends StatelessWidget { this.borderRadiusValue, }); - MoonLinearProgressSizes _getMoonProgressSize(BuildContext context, MoonLinearProgressSize? moonProgressSize) { + MoonLinearProgressSizeProperties _getMoonProgressSize( + BuildContext context, + MoonLinearProgressSize? moonProgressSize, + ) { switch (moonProgressSize) { case MoonLinearProgressSize.x6s: - return context.moonTheme?.linearProgressTheme.x6s ?? MoonLinearProgressSizes.x6s; + return context.moonTheme?.linearProgress.sizes.x6s ?? MoonLinearProgressSizeProperties.x6s; case MoonLinearProgressSize.x5s: - return context.moonTheme?.linearProgressTheme.x5s ?? MoonLinearProgressSizes.x5s; + return context.moonTheme?.linearProgress.sizes.x5s ?? MoonLinearProgressSizeProperties.x5s; case MoonLinearProgressSize.x4s: - return context.moonTheme?.linearProgressTheme.x4s ?? MoonLinearProgressSizes.x4s; + return context.moonTheme?.linearProgress.sizes.x4s ?? MoonLinearProgressSizeProperties.x4s; case MoonLinearProgressSize.x3s: - return context.moonTheme?.linearProgressTheme.x3s ?? MoonLinearProgressSizes.x3s; + return context.moonTheme?.linearProgress.sizes.x3s ?? MoonLinearProgressSizeProperties.x3s; case MoonLinearProgressSize.x2s: - return context.moonTheme?.linearProgressTheme.x2s ?? MoonLinearProgressSizes.x2s; + return context.moonTheme?.linearProgress.sizes.x2s ?? MoonLinearProgressSizeProperties.x2s; default: - return context.moonTheme?.linearProgressTheme.x4s ?? MoonLinearProgressSizes.x4s; + return context.moonTheme?.linearProgress.sizes.x4s ?? MoonLinearProgressSizeProperties.x4s; } } @override Widget build(BuildContext context) { - final MoonLinearProgressSizes effectiveProgressSize = _getMoonProgressSize(context, progressSize); + final Color effectiveColor = color ?? context.moonTheme?.linearProgress.colors.color ?? MoonColors.light.piccolo; + final Color effectiveBackgroundColor = + backgroundColor ?? context.moonTheme?.linearProgress.colors.backgroundColor ?? MoonColors.light.trunks; + + final MoonLinearProgressSizeProperties effectiveProgressSize = _getMoonProgressSize(context, progressSize); final double effectiveBorderRadiusValue = borderRadiusValue ?? effectiveProgressSize.borderRadiusValue; final double effectiveHeight = height ?? effectiveProgressSize.progressHeight; - final Color effectiveColor = color ?? context.moonColors?.hit ?? MoonColors.light.hit; - final Color effectiveBackgroundColor = backgroundColor ?? context.moonColors?.trunks ?? MoonColors.light.trunks; return MoonLinearProgressIndicator( value: value, diff --git a/lib/src/widgets/tag/tag.dart b/lib/src/widgets/tag/tag.dart index 5e28c025..ac9c788c 100644 --- a/lib/src/widgets/tag/tag.dart +++ b/lib/src/widgets/tag/tag.dart @@ -1,8 +1,8 @@ import 'package:figma_squircle/figma_squircle.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/tag/tag_size_properties.dart'; -import 'package:moon_design/src/theme/tag/tag_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/utils/extensions.dart'; @@ -76,19 +76,23 @@ class MoonTag extends StatelessWidget { this.rightIcon, }); - MoonTagSizes _getMoonTagSize(BuildContext context, MoonTagSize? moonTagSize) { + MoonTagSizeProperties _getMoonTagSize(BuildContext context, MoonTagSize? moonTagSize) { switch (moonTagSize) { case MoonTagSize.x2s: - return context.moonTheme?.tagTheme.x2s ?? MoonTagSizes.x2s; + return context.moonTheme?.tag.sizes.x2s ?? MoonTagSizeProperties.x2s; case MoonTagSize.xs: - return context.moonTheme?.tagTheme.xs ?? MoonTagSizes.xs; + return context.moonTheme?.tag.sizes.xs ?? MoonTagSizeProperties.xs; default: - return context.moonTheme?.tagTheme.xs ?? MoonTagSizes.xs; + return context.moonTheme?.tag.sizes.xs ?? MoonTagSizeProperties.xs; } } - Color _getTextColor({required bool isDarkMode, required Color backgroundColor}) { - final backgroundLuminance = backgroundColor.computeLuminance(); + Color _getTextColor(BuildContext context, {required bool isDarkMode, required Color effectiveBackgroundColor}) { + if (backgroundColor == null && context.moonTypography != null) { + return context.moonTypography!.colors.bodyPrimary; + } + + final backgroundLuminance = effectiveBackgroundColor.computeLuminance(); if (backgroundLuminance > 0.5) { return MoonColors.light.bulma; } else { @@ -98,18 +102,18 @@ class MoonTag extends StatelessWidget { @override Widget build(BuildContext context) { - final MoonTagSizes effectiveMoonTagSize = _getMoonTagSize(context, tagSize); + final Color effectiveBackgroundColor = + backgroundColor ?? context.moonTheme?.tag.colors.backgroundColor ?? MoonColors.light.gohan; + + final Color effectiveTextColor = textColor ?? + _getTextColor(context, isDarkMode: context.isDarkMode, effectiveBackgroundColor: effectiveBackgroundColor); + final MoonTagSizeProperties effectiveMoonTagSize = _getMoonTagSize(context, tagSize); final double effectiveHeight = height ?? effectiveMoonTagSize.height; final double effectiveGap = gap ?? effectiveMoonTagSize.gap; final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonTagSize.borderRadius; - final Color effectiveBackgroundColor = backgroundColor ?? context.moonColors?.gohan ?? MoonColors.light.gohan; - - final Color effectiveTextColor = - textColor ?? _getTextColor(isDarkMode: context.isDarkMode, backgroundColor: effectiveBackgroundColor); - final EdgeInsets effectivePadding = padding ?? effectiveMoonTagSize.padding; final EdgeInsetsDirectional correctedPadding = EdgeInsetsDirectional.fromSTEB( @@ -170,7 +174,9 @@ class MoonTag extends StatelessWidget { ), if (label != null) Padding( - padding: EdgeInsets.only(top: isUpperCase && (effectiveMoonTagSize == MoonTagSizes.xs) ? 2.7 : 0), + padding: EdgeInsets.only( + top: isUpperCase && (effectiveMoonTagSize == MoonTagSizeProperties.xs) ? 2.7 : 0, + ), child: label, ), if (rightIcon != null) diff --git a/lib/src/widgets/tooltip/tooltip.dart b/lib/src/widgets/tooltip/tooltip.dart index 22fb9442..2dcaa090 100644 --- a/lib/src/widgets/tooltip/tooltip.dart +++ b/lib/src/widgets/tooltip/tooltip.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/shadows.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/typography/text_styles.dart'; import 'package:moon_design/src/widgets/tooltip/tooltip_shape.dart'; @@ -196,8 +197,12 @@ class MoonTooltipState extends State with RouteAware, SingleTickerP widget.onTooltipTap?.call(); } - Color _getTextColor({required Color backgroundColor}) { - final backgroundLuminance = backgroundColor.computeLuminance(); + Color _getTextColor(BuildContext context, {required Color effectiveBackgroundColor}) { + if (widget.backgroundColor == null && context.moonTypography != null) { + return context.moonTypography!.colors.bodyPrimary; + } + + final backgroundLuminance = effectiveBackgroundColor.computeLuminance(); if (backgroundLuminance > 0.5) { return MoonColors.light.bulma; } else { @@ -375,40 +380,32 @@ class MoonTooltipState extends State with RouteAware, SingleTickerP Widget _createOverlayContent() { MoonTooltipPosition tooltipPosition = widget.tooltipPosition; - final double effectiveArrowBaseWidth = widget.arrowBaseWidth ?? context.moonTooltipTheme?.arrowBaseWidth ?? 16; + final Color effectiveBackgroundColor = + widget.backgroundColor ?? context.moonTheme?.tooltip.colors.backgroundColor ?? MoonColors.light.gohan; + + final Color effectiveTextColor = _getTextColor(context, effectiveBackgroundColor: effectiveBackgroundColor); + + final double effectiveArrowBaseWidth = + widget.arrowBaseWidth ?? context.moonTheme?.tooltip.properties.arrowBaseWidth ?? 16; final double effectiveArrowLength = - widget.hasArrow ? (widget.arrowLength ?? context.moonTooltipTheme?.arrowLength ?? 8) : 0; + widget.hasArrow ? (widget.arrowLength ?? context.moonTheme?.tooltip.properties.arrowLength ?? 8) : 0; - final double effectiveArrowTipDistance = widget.arrowTipDistance ?? context.moonTooltipTheme?.arrowTipDistance ?? 8; + final double effectiveArrowTipDistance = + widget.arrowTipDistance ?? context.moonTheme?.tooltip.properties.arrowTipDistance ?? 8; final EdgeInsets effectiveContentPadding = - widget.contentPadding ?? context.moonTooltipTheme?.contentPadding ?? const EdgeInsets.all(12); + widget.contentPadding ?? context.moonTheme?.tooltip.properties.contentPadding ?? const EdgeInsets.all(12); final double effectiveBorderRadius = - widget.borderRadiusValue ?? context.moonTooltipTheme?.borderRadius.topLeft.x ?? 4; + widget.borderRadiusValue ?? context.moonTheme?.tooltip.properties.borderRadius.topLeft.x ?? 4; - final Color effectiveBackgroundColor = - widget.backgroundColor ?? context.moonColors?.gohan ?? MoonColors.light.gohan; - - final Color effectiveTextColor = _getTextColor(backgroundColor: effectiveBackgroundColor); - - final TextStyle effectiveTextStyle = context.moonTooltipTheme?.textStyle.copyWith(color: effectiveTextColor) ?? - MoonTextStyles.text.text12.copyWith(color: effectiveTextColor); + final TextStyle effectiveTextStyle = + context.moonTheme?.tooltip.properties.textStyle.copyWith(color: effectiveTextColor) ?? + MoonTextStyles.body.text12.copyWith(color: effectiveTextColor); - final List effectiveTooltipShadows = widget.tooltipShadows ?? - context.moonShadows?.sm ?? - const [ - BoxShadow( - color: Color(0x66000000), - blurRadius: 1, - ), - BoxShadow( - color: Color(0x28000000), - blurRadius: 6, - offset: Offset(0, 6), - ), - ]; + final List effectiveTooltipShadows = + widget.tooltipShadows ?? context.moonTheme?.tooltip.shadows.tooltipShadows ?? MoonShadows.light.sm; final targetRenderBox = context.findRenderObject()! as RenderBox; final overlayRenderBox = Overlay.of(context).context.findRenderObject()! as RenderBox; @@ -511,11 +508,12 @@ class MoonTooltipState extends State with RouteAware, SingleTickerP @override Widget build(BuildContext context) { - final Duration effectiveTransitionDuration = - widget.transitionDuration ?? context.moonTooltipTheme?.transitionDuration ?? const Duration(milliseconds: 150); + final Duration effectiveTransitionDuration = widget.transitionDuration ?? + context.moonTheme?.tooltip.properties.transitionDuration ?? + const Duration(milliseconds: 150); final Curve effectiveTransitionCurve = - widget.transitionCurve ?? context.moonTooltipTheme?.transitionCurve ?? Curves.easeInOutCubic; + widget.transitionCurve ?? context.moonTheme?.tooltip.properties.transitionCurve ?? Curves.easeInOutCubic; animationController ??= AnimationController( duration: effectiveTransitionDuration,