From fc476a0ade1684b2b12e24a5d78f98451db6e1ca Mon Sep 17 00:00:00 2001 From: BirgittMajas <79840500+BirgittMajas@users.noreply.github.com> Date: Wed, 14 Jun 2023 16:52:11 +0300 Subject: [PATCH] fix: [MDS-551] Add default theming for icons (#192) --- .../lib/src/storybook/stories/authcode.dart | 46 ++++++++++++++--- example/lib/src/storybook/stories/avatar.dart | 6 ++- .../lib/src/storybook/stories/checkbox.dart | 12 +++++ example/lib/src/storybook/stories/modal.dart | 21 ++++++-- .../lib/src/storybook/stories/popover.dart | 24 +++++++-- example/lib/src/storybook/stories/radio.dart | 19 ++++++- example/lib/src/storybook/stories/switch.dart | 38 ++++++-------- example/lib/src/storybook/stories/tag.dart | 29 ++++++++--- example/lib/src/storybook/stories/toast.dart | 34 +++++++++++-- .../lib/src/storybook/stories/tooltip.dart | 16 +++++- lib/moon_design.dart | 1 + .../accordion_item_size_properties.dart | 10 ++-- lib/src/theme/alert/alert_properties.dart | 4 +- lib/src/theme/avatar/avatar_colors.dart | 22 ++++++++ .../theme/avatar/avatar_size_properties.dart | 2 +- .../theme/button/button_size_properties.dart | 4 +- lib/src/theme/checkbox/checkbox_colors.dart | 13 ++++- .../theme/checkbox/checkbox_properties.dart | 12 ++++- lib/src/theme/chip/chip_size_properties.dart | 4 +- lib/src/theme/icons/icon_colors.dart | 49 ++++++++++++++++++ lib/src/theme/icons/icon_theme.dart | 48 ++++++++++++++++++ lib/src/theme/modal/modal_colors.dart | 22 ++++++++ lib/src/theme/modal/modal_properties.dart | 12 ++++- lib/src/theme/popover/popover_colors.dart | 26 +++++++++- lib/src/theme/popover/popover_properties.dart | 12 ++++- lib/src/theme/radio/radio_colors.dart | 13 ++++- lib/src/theme/radio/radio_properties.dart | 44 ++++++++++++++++ lib/src/theme/radio/radio_theme.dart | 13 ++++- .../segmented_control_size_properties.dart | 4 +- lib/src/theme/switch/switch_colors.dart | 25 +++++++++- .../theme/switch/switch_size_properties.dart | 27 +++++++++- .../tab_bar/tab_bar_size_properties.dart | 4 +- lib/src/theme/tag/tag_colors.dart | 22 ++++++++ .../text_input_size_properties.dart | 4 +- lib/src/theme/theme.dart | 13 +++++ lib/src/theme/toast/toast_colors.dart | 23 ++++++++- lib/src/theme/toast/toast_properties.dart | 12 ++++- lib/src/theme/tooltip/tooltip_colors.dart | 26 +++++++++- lib/src/theme/typography/text_colors.dart | 8 +-- lib/src/theme/typography/text_styles.dart | 25 +++++++++- lib/src/widgets/alert/alert.dart | 9 ++-- lib/src/widgets/authcode/authcode.dart | 8 +-- lib/src/widgets/avatar/avatar.dart | 41 ++++++++------- lib/src/widgets/checkbox/checkbox.dart | 15 +++--- lib/src/widgets/modal/modal.dart | 14 ++++-- lib/src/widgets/popover/popover.dart | 14 ++++-- lib/src/widgets/radio/radio.dart | 19 ++++--- lib/src/widgets/switch/switch.dart | 42 ++++++++++++---- lib/src/widgets/tag/tag.dart | 14 +++--- lib/src/widgets/toast/toast.dart | 17 +++++-- lib/src/widgets/tooltip/tooltip.dart | 50 +++++++++++-------- 51 files changed, 807 insertions(+), 185 deletions(-) create mode 100644 lib/src/theme/icons/icon_colors.dart create mode 100644 lib/src/theme/icons/icon_theme.dart create mode 100644 lib/src/theme/radio/radio_properties.dart diff --git a/example/lib/src/storybook/stories/authcode.dart b/example/lib/src/storybook/stories/authcode.dart index 79910e4c..311e18ef 100644 --- a/example/lib/src/storybook/stories/authcode.dart +++ b/example/lib/src/storybook/stories/authcode.dart @@ -41,11 +41,34 @@ class AuthCodeStory extends Story { ], ); + final textColorsKnob = context.knobs.nullable.options( + label: "Text color", + description: "MoonColors variants for MoonAuthCode text.", + enabled: false, + initial: 0, + // piccolo + options: colorOptions, + ); + + final textColor = colorTable(context)[textColorsKnob ?? 40]; + + final cursorColorsKnob = context.knobs.nullable.options( + label: "authFieldCursorColor", + description: "MoonColors variants for MoonAuthCode cursor.", + enabled: false, + initial: 0, + // piccolo + options: colorOptions, + ); + + final cursorColor = colorTable(context)[cursorColorsKnob ?? 40]; + final selectedFillColorsKnob = context.knobs.nullable.options( label: "selectedFillColor", description: "MoonColors variants for selected MoonAuthCode input field.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -55,7 +78,8 @@ class AuthCodeStory extends Story { label: "activeFillColor", description: "MoonColors variants for active MoonAuthCode input fields.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -65,7 +89,8 @@ class AuthCodeStory extends Story { label: "inactiveFillColor", description: "MoonColors variants for inactive MoonAuthCode input fields.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -75,7 +100,8 @@ class AuthCodeStory extends Story { label: "selectedBorderColor", description: "MoonColors variants for selected MoonAuthCode input field border.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -85,7 +111,8 @@ class AuthCodeStory extends Story { label: "activeBorderColor", description: "MoonColors variants for active MoonAuthCode input fields borders.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -95,7 +122,8 @@ class AuthCodeStory extends Story { label: "inactiveBorderColor", description: "MoonColors variants for inactive MoonAuthCode input fields borders.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -155,6 +183,8 @@ class AuthCodeStory extends Story { mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + textStyle: TextStyle(color: textColor), + authFieldCursorColor: cursorColor, selectedFillColor: selectedFillColor, activeFillColor: activeFillColor, inactiveFillColor: inactiveFillColor, @@ -177,6 +207,8 @@ class AuthCodeStory extends Story { mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + textStyle: TextStyle(color: textColor), + authFieldCursorColor: cursorColor, selectedFillColor: selectedFillColor, activeFillColor: activeFillColor, inactiveFillColor: inactiveFillColor, @@ -202,6 +234,8 @@ class AuthCodeStory extends Story { borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, errorStreamController: errorStreamController, + textStyle: TextStyle(color: textColor), + authFieldCursorColor: cursorColor, selectedFillColor: selectedFillColor, activeFillColor: activeFillColor, inactiveFillColor: inactiveFillColor, diff --git a/example/lib/src/storybook/stories/avatar.dart b/example/lib/src/storybook/stories/avatar.dart index 7afddbde..7bd0a55b 100644 --- a/example/lib/src/storybook/stories/avatar.dart +++ b/example/lib/src/storybook/stories/avatar.dart @@ -113,7 +113,6 @@ class AvatarStory extends Story { const TextDivider(text: "Customisable MoonAvatar"), const SizedBox(height: 32), MoonAvatar( - textColor: textColor, avatarSize: avatarSizesKnob, badgeSize: badgeSizeKnob?.toDouble(), borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, @@ -124,7 +123,10 @@ class AvatarStory extends Story { badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight, content: Padding( padding: const EdgeInsets.only(top: 1.0), - child: Text(customLabelTextKnob), + child: Text( + customLabelTextKnob, + style: TextStyle(color: textColor), + ), ), ), const SizedBox(height: 40), diff --git a/example/lib/src/storybook/stories/checkbox.dart b/example/lib/src/storybook/stories/checkbox.dart index 38f3dd7b..18264946 100644 --- a/example/lib/src/storybook/stories/checkbox.dart +++ b/example/lib/src/storybook/stories/checkbox.dart @@ -12,6 +12,17 @@ class CheckboxStory extends Story { : super( name: "Checkbox", builder: (context) { + final textColorsKnob = context.knobs.nullable.options( + label: "Text color", + description: "MoonColors variants for MoonCheckbox with label text.", + enabled: false, + initial: 0, + // piccolo + options: colorOptions, + ); + + final textColor = colorTable(context)[textColorsKnob ?? 40]; + final checkColorsKnob = context.knobs.nullable.options( label: "checkColor", description: "MoonColors variants for MoonCheckbox icon.", @@ -94,6 +105,7 @@ class CheckboxStory extends Story { return MoonCheckbox.withLabel( context, label: "With label", + textStyle: TextStyle(color: textColor), activeColor: activeColor, inactiveColor: inactiveColor, checkColor: checkColor, diff --git a/example/lib/src/storybook/stories/modal.dart b/example/lib/src/storybook/stories/modal.dart index 5ab3113b..671a41b1 100644 --- a/example/lib/src/storybook/stories/modal.dart +++ b/example/lib/src/storybook/stories/modal.dart @@ -8,11 +8,23 @@ class ModalStory extends Story { : super( name: "Modal", builder: (context) { + final textColorsKnob = context.knobs.nullable.options( + label: "Text color", + description: "MoonColors variants for MoonModal text.", + enabled: false, + initial: 0, + // piccolo + options: colorOptions, + ); + + final textColor = colorTable(context)[textColorsKnob ?? 40]; + final backgroundColorsKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonModal background.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -22,7 +34,8 @@ class ModalStory extends Story { label: "barrierColor", description: "MoonColors variants for MoonModal barrier.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -58,7 +71,7 @@ class ModalStory extends Story { padding: const EdgeInsets.fromLTRB(24, 20, 24, 16), child: Text( "MoonModal title", - style: context.moonTypography!.heading.text18, + style: context.moonTypography!.heading.text18.copyWith(color: textColor), ), ), Container( @@ -69,7 +82,7 @@ class ModalStory extends Story { padding: const EdgeInsets.fromLTRB(24, 16, 24, 16), child: Text( "Reopen the MoonModal to view the updated knob value.", - style: context.moonTypography!.body.text14, + style: context.moonTypography!.body.text14.copyWith(color: textColor), ), ), Padding( diff --git a/example/lib/src/storybook/stories/popover.dart b/example/lib/src/storybook/stories/popover.dart index 7a144fac..62a2feb9 100644 --- a/example/lib/src/storybook/stories/popover.dart +++ b/example/lib/src/storybook/stories/popover.dart @@ -34,11 +34,23 @@ class PopoverStory extends Story { ], ); + final textColorsKnob = context.knobs.nullable.options( + label: "Text color", + description: "MoonColors variants for MoonPopover text.", + enabled: false, + initial: 0, + // piccolo + options: colorOptions, + ); + + final textColor = colorTable(context)[textColorsKnob ?? 40]; + final backgroundColorsKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonPopover background.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -48,7 +60,8 @@ class PopoverStory extends Story { label: "borderColor", description: "MoonColors variants for MoonPopover border.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -106,7 +119,12 @@ class PopoverStory extends Story { content: const MoonIcon(MoonIcons.rocket_24), ), const SizedBox(width: 12), - Expanded(child: Text(customLabelTextKnob)), + Expanded( + child: Text( + customLabelTextKnob, + style: TextStyle(color: textColor), + ), + ), ], ), const SizedBox(height: 16), diff --git a/example/lib/src/storybook/stories/radio.dart b/example/lib/src/storybook/stories/radio.dart index 661f8931..2dea0432 100644 --- a/example/lib/src/storybook/stories/radio.dart +++ b/example/lib/src/storybook/stories/radio.dart @@ -17,11 +17,23 @@ class RadioStory extends Story { : super( name: "Radio", builder: (context) { + final textColorsKnob = context.knobs.nullable.options( + label: "Text color", + description: "MoonColors variants for MoonRadio with label text.", + enabled: false, + initial: 0, + // piccolo + options: colorOptions, + ); + + final textColor = colorTable(context)[textColorsKnob ?? 40]; + final activeColorsKnob = context.knobs.nullable.options( label: "activeColor", description: "MoonColors variants for checked MoonRadio.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -31,7 +43,8 @@ class RadioStory extends Story { label: "inactiveColor", description: "MoonColors variants for unchecked MoonRadio.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -78,6 +91,7 @@ class RadioStory extends Story { const SizedBox(height: 32), MoonRadio.withLabel( context, + textStyle: TextStyle(color: textColor), value: ChoiceLabel.first, groupValue: valueLabel, label: "With label #1", @@ -87,6 +101,7 @@ class RadioStory extends Story { const SizedBox(height: 8), MoonRadio.withLabel( context, + textStyle: TextStyle(color: textColor), value: ChoiceLabel.second, groupValue: valueLabel, label: "With label #2", diff --git a/example/lib/src/storybook/stories/switch.dart b/example/lib/src/storybook/stories/switch.dart index 776e1a1c..5fe9acb7 100644 --- a/example/lib/src/storybook/stories/switch.dart +++ b/example/lib/src/storybook/stories/switch.dart @@ -1,7 +1,6 @@ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/cupertino.dart'; -import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; @@ -29,7 +28,8 @@ class SwitchStory extends Story { label: "thumbColor", description: "MoonColors variants for MoonSwitch thumb.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -39,7 +39,8 @@ class SwitchStory extends Story { label: "activeTrackColor", description: "MoonColors variants for active MoonSwitch track.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -49,7 +50,8 @@ class SwitchStory extends Story { label: "inactiveTrackColor", description: "MoonColors variants for inactive MoonSwitch track.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -85,22 +87,15 @@ class SwitchStory extends Story { StatefulBuilder( builder: (context, setState) { return MoonSwitch( - activeThumbWidget: const MoonIcon( - MoonIcons.check_alternative_16, - size: 14, - ), - inactiveThumbWidget: const MoonIcon( - MoonIcons.close_16, - size: 12, - ), - activeTrackWidget: Text( + switchSize: switchSizesKnob, + activeThumbWidget: const MoonIcon(MoonIcons.check_alternative_16), + inactiveThumbWidget: const MoonIcon(MoonIcons.close_small_16), + activeTrackWidget: const Text( "ON", - style: MoonTextStyles.caption.text8.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1), textAlign: TextAlign.center, ), - inactiveTrackWidget: Text( + inactiveTrackWidget: const Text( "OFF", - style: MoonTextStyles.caption.text8.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1), textAlign: TextAlign.center, ), value: value, @@ -112,14 +107,9 @@ class SwitchStory extends Story { StatefulBuilder( builder: (context, setState) { return MoonSwitch( - activeTrackWidget: const MoonIcon( - MoonIcons.check_alternative_16, - size: 14, - ), - inactiveTrackWidget: const MoonIcon( - MoonIcons.close_16, - size: 12, - ), + switchSize: switchSizesKnob, + activeTrackWidget: const MoonIcon(MoonIcons.moon_16), + inactiveTrackWidget: const MoonIcon(MoonIcons.sun_16), value: value, onChanged: (newValue) => setState(() => value = newValue), ); diff --git a/example/lib/src/storybook/stories/tag.dart b/example/lib/src/storybook/stories/tag.dart index 0c1ccd0d..df4cbc40 100644 --- a/example/lib/src/storybook/stories/tag.dart +++ b/example/lib/src/storybook/stories/tag.dart @@ -25,20 +25,33 @@ class TagStory extends Story { ); final textColorsKnob = context.knobs.nullable.options( - label: "textColor", + label: "Text color", description: "MoonColors variants for MoonTag text.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorsKnob ?? 40]; + final iconColorsKnob = context.knobs.nullable.options( + label: "Icon color", + description: "MoonColors variants for MoonTag icon.", + enabled: false, + initial: 0, + // piccolo + options: colorOptions, + ); + + final iconColor = colorTable(context)[iconColorsKnob ?? 40]; + final backgroundColorsKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTag background.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -84,13 +97,15 @@ class TagStory extends Story { onTap: () {}, tagSize: tagSizesKnob, isUpperCase: setUpperCase, - textColor: textColor, backgroundColor: backgroundColor, - leading: showLeadingKnob ? const MoonIcon(MoonIcons.close_small_16) : null, + leading: showLeadingKnob ? MoonIcon(MoonIcons.close_small_16, color: iconColor) : null, label: showLabelKnob - ? Text(setUpperCase ? customLabelTextKnob.toUpperCase() : customLabelTextKnob) + ? Text( + setUpperCase ? customLabelTextKnob.toUpperCase() : customLabelTextKnob, + style: TextStyle(color: textColor), + ) : null, - trailing: showTrailingKnob ? const MoonIcon(MoonIcons.close_small_16) : null, + trailing: showTrailingKnob ? MoonIcon(MoonIcons.close_small_16, color: iconColor) : null, ), const SizedBox(height: 64), ], diff --git a/example/lib/src/storybook/stories/toast.dart b/example/lib/src/storybook/stories/toast.dart index 5f4ef413..79bfdf44 100644 --- a/example/lib/src/storybook/stories/toast.dart +++ b/example/lib/src/storybook/stories/toast.dart @@ -35,11 +35,34 @@ class ToastStory extends Story { ], ); + final textColorsKnob = context.knobs.nullable.options( + label: "Text color", + description: "MoonColors variants for MoonToast text.", + enabled: false, + initial: 0, + // piccolo + options: colorOptions, + ); + + final textColor = colorTable(context)[textColorsKnob ?? 40]; + + final iconColorsKnob = context.knobs.nullable.options( + label: "Icon color", + description: "MoonColors variants for MoonToast icon.", + enabled: false, + initial: 0, + // piccolo + options: colorOptions, + ); + + final iconColor = colorTable(context)[iconColorsKnob ?? 40]; + final backgroundColorsKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonToast background.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -81,9 +104,12 @@ class ToastStory extends Story { displayDurationKnob != null ? Duration(seconds: displayDurationKnob) : null, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, - leading: const MoonIcon(MoonIcons.info_24), - title: Text(customLabelTextKnob), - trailing: const MoonIcon(MoonIcons.star_24), + leading: MoonIcon(MoonIcons.info_24, color: iconColor), + title: Text( + customLabelTextKnob, + style: TextStyle(color: textColor), + ), + trailing: MoonIcon(MoonIcons.star_24, color: iconColor), ); }, ); diff --git a/example/lib/src/storybook/stories/tooltip.dart b/example/lib/src/storybook/stories/tooltip.dart index 8ee746e0..53303ab1 100644 --- a/example/lib/src/storybook/stories/tooltip.dart +++ b/example/lib/src/storybook/stories/tooltip.dart @@ -35,6 +35,17 @@ class TooltipStory extends Story { ], ); + final textColorsKnob = context.knobs.nullable.options( + label: "Text color", + description: "MoonColors variants for MoonTooltip text.", + enabled: false, + initial: 0, + // piccolo + options: colorOptions, + ); + + final textColor = colorTable(context)[textColorsKnob ?? 40]; + final backgroundColorsKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTooltip background.", @@ -133,7 +144,10 @@ class TooltipStory extends Story { arrowOffsetValue: arrowOffsetKnob ?? 0, arrowTipDistance: arrowTipDistanceKnob, tooltipShadows: showShadowKnob == true ? null : [], - content: Text(customLabelTextKnob), + content: Text( + customLabelTextKnob, + style: TextStyle(color: textColor), + ), child: MoonFilledButton( onTap: () { setState(() => show = true); diff --git a/lib/moon_design.dart b/lib/moon_design.dart index 4407d17a..ad960d38 100644 --- a/lib/moon_design.dart +++ b/lib/moon_design.dart @@ -11,6 +11,7 @@ export 'package:moon_design/src/theme/checkbox/checkbox_theme.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/effects.dart'; +export 'package:moon_design/src/theme/icons/icon_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/modal/modal_theme.dart'; diff --git a/lib/src/theme/accordion/accordion_item_size_properties.dart b/lib/src/theme/accordion/accordion_item_size_properties.dart index e2142eab..e7f1ca6a 100644 --- a/lib/src/theme/accordion/accordion_item_size_properties.dart +++ b/lib/src/theme/accordion/accordion_item_size_properties.dart @@ -24,8 +24,8 @@ class MoonAccordionItemSizeProperties extends ThemeExtension with Diagn transitionDuration: const Duration(milliseconds: 200), transitionCurve: Curves.easeInOutCubic, padding: EdgeInsets.all(MoonSizes.sizes.x2s), - bodyTextStyle: MoonTextStyles.body.text14, - titleTextStyle: MoonTextStyles.heading.text14, + bodyTextStyle: MoonTextStyles.body.textDefault, + titleTextStyle: MoonTextStyles.heading.textDefault, ); /// Border radius for alert. diff --git a/lib/src/theme/avatar/avatar_colors.dart b/lib/src/theme/avatar/avatar_colors.dart index a19990ee..4ac6fb75 100644 --- a/lib/src/theme/avatar/avatar_colors.dart +++ b/lib/src/theme/avatar/avatar_colors.dart @@ -2,20 +2,32 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/icons/icon_theme.dart'; +import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonAvatarColors extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonAvatarColors( + textColor: MoonTypography.light.colors.bodyPrimary, + iconColor: MoonIconTheme.light.colors.primaryColor, backgroundColor: MoonColors.light.gohan, badgeColor: MoonColors.light.roshi100, ); static final dark = MoonAvatarColors( + textColor: MoonTypography.dark.colors.bodyPrimary, + iconColor: MoonIconTheme.dark.colors.primaryColor, backgroundColor: MoonColors.dark.gohan, badgeColor: MoonColors.dark.roshi100, ); + /// Avatar text color. + final Color textColor; + + /// Avatar icon color. + final Color iconColor; + /// Avatar background color. final Color backgroundColor; @@ -23,16 +35,22 @@ class MoonAvatarColors extends ThemeExtension with Diagnostica final Color badgeColor; const MoonAvatarColors({ + required this.textColor, + required this.iconColor, required this.backgroundColor, required this.badgeColor, }); @override MoonAvatarColors copyWith({ + Color? textColor, + Color? iconColor, Color? backgroundColor, Color? badgeColor, }) { return MoonAvatarColors( + textColor: textColor ?? this.textColor, + iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, badgeColor: badgeColor ?? this.badgeColor, ); @@ -43,6 +61,8 @@ class MoonAvatarColors extends ThemeExtension with Diagnostica if (other is! MoonAvatarColors) return this; return MoonAvatarColors( + textColor: colorPremulLerp(textColor, other.textColor, t)!, + iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, badgeColor: colorPremulLerp(badgeColor, other.badgeColor, t)!, ); @@ -53,6 +73,8 @@ class MoonAvatarColors extends ThemeExtension with Diagnostica super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAvatarColors")) + ..add(ColorProperty("textColor", textColor)) + ..add(ColorProperty("iconColor", iconColor)) ..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 index 2895b6a2..775a3f42 100644 --- a/lib/src/theme/avatar/avatar_size_properties.dart +++ b/lib/src/theme/avatar/avatar_size_properties.dart @@ -33,7 +33,7 @@ class MoonAvatarSizeProperties extends ThemeExtension avatarSizeValue: MoonSizes.sizes.md, badgeMarginValue: MoonSizes.sizes.md * _badgeMarginValueToAvatarRatio, badgeSizeValue: MoonSizes.sizes.md * _badgeToAvatarRatio, - textStyle: MoonTextStyles.heading.text14, + textStyle: MoonTextStyles.heading.textDefault, ); static final lg = MoonAvatarSizeProperties( diff --git a/lib/src/theme/button/button_size_properties.dart b/lib/src/theme/button/button_size_properties.dart index cf257408..9ddabc13 100644 --- a/lib/src/theme/button/button_size_properties.dart +++ b/lib/src/theme/button/button_size_properties.dart @@ -24,7 +24,7 @@ class MoonButtonSizeProperties extends ThemeExtension height: MoonSizes.sizes.sm, iconSizeValue: MoonSizes.sizes.xs, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - textStyle: MoonTextStyles.heading.text14, + textStyle: MoonTextStyles.heading.textDefault, ); static final md = MoonButtonSizeProperties( @@ -33,7 +33,7 @@ class MoonButtonSizeProperties extends ThemeExtension height: MoonSizes.sizes.md, iconSizeValue: MoonSizes.sizes.xs, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), - textStyle: MoonTextStyles.heading.text14, + textStyle: MoonTextStyles.heading.textDefault, ); static final lg = MoonButtonSizeProperties( diff --git a/lib/src/theme/checkbox/checkbox_colors.dart b/lib/src/theme/checkbox/checkbox_colors.dart index b1052566..611211d3 100644 --- a/lib/src/theme/checkbox/checkbox_colors.dart +++ b/lib/src/theme/checkbox/checkbox_colors.dart @@ -2,6 +2,7 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable @@ -11,6 +12,7 @@ class MoonCheckboxColors extends ThemeExtension with Diagnos borderColor: MoonColors.light.trunks, checkColor: MoonColors.light.goten, inactiveColor: Colors.transparent, + textColor: MoonTypography.light.colors.bodyPrimary, ); static final dark = MoonCheckboxColors( @@ -18,6 +20,7 @@ class MoonCheckboxColors extends ThemeExtension with Diagnos borderColor: MoonColors.dark.trunks, checkColor: MoonColors.dark.goten, inactiveColor: Colors.transparent, + textColor: MoonTypography.dark.colors.bodyPrimary, ); /// Checkbox active color. @@ -32,11 +35,15 @@ class MoonCheckboxColors extends ThemeExtension with Diagnos /// Checkbox inactive color. final Color inactiveColor; + /// Checkbox text color. + final Color textColor; + const MoonCheckboxColors({ required this.activeColor, required this.borderColor, required this.checkColor, required this.inactiveColor, + required this.textColor, }); @override @@ -45,12 +52,14 @@ class MoonCheckboxColors extends ThemeExtension with Diagnos Color? borderColor, Color? checkColor, Color? inactiveColor, + Color? textColor, }) { return MoonCheckboxColors( activeColor: activeColor ?? this.activeColor, borderColor: borderColor ?? this.borderColor, checkColor: checkColor ?? this.checkColor, inactiveColor: inactiveColor ?? this.inactiveColor, + textColor: textColor ?? this.textColor, ); } @@ -63,6 +72,7 @@ class MoonCheckboxColors extends ThemeExtension with Diagnos borderColor: colorPremulLerp(borderColor, other.borderColor, t)!, checkColor: colorPremulLerp(checkColor, other.checkColor, t)!, inactiveColor: colorPremulLerp(inactiveColor, other.inactiveColor, t)!, + textColor: colorPremulLerp(textColor, other.textColor, t)!, ); } @@ -74,6 +84,7 @@ class MoonCheckboxColors extends ThemeExtension with Diagnos ..add(ColorProperty("activeColor", activeColor)) ..add(ColorProperty("borderColor", borderColor)) ..add(ColorProperty("checkColor", checkColor)) - ..add(ColorProperty("inactiveColor", inactiveColor)); + ..add(ColorProperty("inactiveColor", inactiveColor)) + ..add(ColorProperty("textColor", textColor)); } } diff --git a/lib/src/theme/checkbox/checkbox_properties.dart b/lib/src/theme/checkbox/checkbox_properties.dart index ca3a1960..a0bdcfa4 100644 --- a/lib/src/theme/checkbox/checkbox_properties.dart +++ b/lib/src/theme/checkbox/checkbox_properties.dart @@ -2,26 +2,34 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/borders.dart'; +import 'package:moon_design/src/theme/typography/text_styles.dart'; @immutable class MoonCheckboxProperties extends ThemeExtension with DiagnosticableTreeMixin { static final properties = MoonCheckboxProperties( borderRadius: MoonBorders.borders.interactiveXs, + textStyle: MoonTextStyles.body.textDefault, ); /// Checkbox border radius. final BorderRadiusGeometry borderRadius; + /// Checkbox text style. + final TextStyle textStyle; + const MoonCheckboxProperties({ required this.borderRadius, + required this.textStyle, }); @override MoonCheckboxProperties copyWith({ BorderRadiusGeometry? borderRadius, + TextStyle? textStyle, }) { return MoonCheckboxProperties( borderRadius: borderRadius ?? this.borderRadius, + textStyle: textStyle ?? this.textStyle, ); } @@ -31,6 +39,7 @@ class MoonCheckboxProperties extends ThemeExtension with return MoonCheckboxProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, + textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @@ -39,6 +48,7 @@ class MoonCheckboxProperties extends ThemeExtension with super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCheckboxProperties")) - ..add(DiagnosticsProperty("borderRadius", borderRadius)); + ..add(DiagnosticsProperty("borderRadius", borderRadius)) + ..add(DiagnosticsProperty("textStyle", textStyle)); } } diff --git a/lib/src/theme/chip/chip_size_properties.dart b/lib/src/theme/chip/chip_size_properties.dart index ca0bf222..4b4e66ae 100644 --- a/lib/src/theme/chip/chip_size_properties.dart +++ b/lib/src/theme/chip/chip_size_properties.dart @@ -15,7 +15,7 @@ class MoonChipSizeProperties extends ThemeExtension with height: MoonSizes.sizes.sm, iconSizeValue: MoonSizes.sizes.x2s, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - textStyle: MoonTextStyles.heading.text14, + textStyle: MoonTextStyles.heading.textDefault, ); static final md = MoonChipSizeProperties( @@ -24,7 +24,7 @@ class MoonChipSizeProperties extends ThemeExtension with height: MoonSizes.sizes.md, iconSizeValue: MoonSizes.sizes.xs, padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - textStyle: MoonTextStyles.heading.text14, + textStyle: MoonTextStyles.heading.textDefault, ); /// Chip border radius. diff --git a/lib/src/theme/icons/icon_colors.dart b/lib/src/theme/icons/icon_colors.dart new file mode 100644 index 00000000..f2077796 --- /dev/null +++ b/lib/src/theme/icons/icon_colors.dart @@ -0,0 +1,49 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/utils/color_premul_lerp.dart'; + +@immutable +class MoonIconColors extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonIconColors( + primaryColor: MoonColors.light.bulma, + ); + + static final dark = MoonIconColors( + primaryColor: MoonColors.dark.bulma, + ); + + /// Primary icon color. + final Color primaryColor; + + const MoonIconColors({ + required this.primaryColor, + }); + + @override + MoonIconColors copyWith({ + Color? primaryColor, + }) { + return MoonIconColors( + primaryColor: primaryColor ?? this.primaryColor, + ); + } + + @override + MoonIconColors lerp(ThemeExtension? other, double t) { + if (other is! MoonIconColors) return this; + + return MoonIconColors( + primaryColor: colorPremulLerp(primaryColor, other.primaryColor, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonIcons")) + ..add(ColorProperty("primaryColor", primaryColor)); + } +} diff --git a/lib/src/theme/icons/icon_theme.dart b/lib/src/theme/icons/icon_theme.dart new file mode 100644 index 00000000..a976087e --- /dev/null +++ b/lib/src/theme/icons/icon_theme.dart @@ -0,0 +1,48 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/icons/icon_colors.dart'; + +@immutable +class MoonIconTheme extends ThemeExtension with DiagnosticableTreeMixin { + static final light = MoonIconTheme( + colors: MoonIconColors.light, + ); + + static final dark = MoonIconTheme( + colors: MoonIconColors.dark, + ); + + /// Colors for icons. + final MoonIconColors colors; + + const MoonIconTheme({ + required this.colors, + }); + + @override + MoonIconTheme copyWith({ + MoonIconColors? colors, + }) { + return MoonIconTheme( + colors: colors ?? this.colors, + ); + } + + @override + MoonIconTheme lerp(ThemeExtension? other, double t) { + if (other is! MoonIconTheme) return this; + + return MoonIconTheme( + colors: colors.lerp(other.colors, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonIcons")) + ..add(DiagnosticsProperty("colors", colors)); + } +} diff --git a/lib/src/theme/modal/modal_colors.dart b/lib/src/theme/modal/modal_colors.dart index 8d3c98bb..04a66504 100644 --- a/lib/src/theme/modal/modal_colors.dart +++ b/lib/src/theme/modal/modal_colors.dart @@ -2,20 +2,32 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/icons/icon_theme.dart'; +import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonModalColors extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonModalColors( + textColor: MoonTypography.light.colors.bodyPrimary, + iconColor: MoonIconTheme.light.colors.primaryColor, backgroundColor: MoonColors.light.gohan, barrierColor: MoonColors.light.zeno, ); static final dark = MoonModalColors( + textColor: MoonTypography.dark.colors.bodyPrimary, + iconColor: MoonIconTheme.dark.colors.primaryColor, backgroundColor: MoonColors.dark.gohan, barrierColor: MoonColors.dark.zeno, ); + /// Modal text color. + final Color textColor; + + /// Modal icon color. + final Color iconColor; + /// Modal background color. final Color backgroundColor; @@ -23,16 +35,22 @@ class MoonModalColors extends ThemeExtension with Diagnosticabl final Color barrierColor; const MoonModalColors({ + required this.textColor, + required this.iconColor, required this.backgroundColor, required this.barrierColor, }); @override MoonModalColors copyWith({ + Color? textColor, + Color? iconColor, Color? backgroundColor, Color? barrierColor, }) { return MoonModalColors( + textColor: textColor ?? this.textColor, + iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, barrierColor: barrierColor ?? this.barrierColor, ); @@ -43,6 +61,8 @@ class MoonModalColors extends ThemeExtension with Diagnosticabl if (other is! MoonModalColors) return this; return MoonModalColors( + textColor: colorPremulLerp(textColor, other.textColor, t)!, + iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, barrierColor: colorPremulLerp(barrierColor, other.barrierColor, t)!, ); @@ -53,6 +73,8 @@ class MoonModalColors extends ThemeExtension with Diagnosticabl super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonModalColors")) + ..add(ColorProperty("textColor", textColor)) + ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)) ..add(ColorProperty("barrierColor", barrierColor)); } diff --git a/lib/src/theme/modal/modal_properties.dart b/lib/src/theme/modal/modal_properties.dart index b85098dd..a8c7c840 100644 --- a/lib/src/theme/modal/modal_properties.dart +++ b/lib/src/theme/modal/modal_properties.dart @@ -2,6 +2,7 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/borders.dart'; +import 'package:moon_design/src/theme/typography/text_styles.dart'; @immutable class MoonModalProperties extends ThemeExtension with DiagnosticableTreeMixin { @@ -9,6 +10,7 @@ class MoonModalProperties extends ThemeExtension with Diagn borderRadius: MoonBorders.borders.surfaceSm, transitionDuration: const Duration(milliseconds: 200), transitionCurve: Curves.easeInOutCubic, + textStyle: MoonTextStyles.body.textDefault, ); /// Modal border radius. @@ -20,10 +22,14 @@ class MoonModalProperties extends ThemeExtension with Diagn /// Modal transition curve. final Curve transitionCurve; + /// Modal text style. + final TextStyle textStyle; + const MoonModalProperties({ required this.borderRadius, required this.transitionDuration, required this.transitionCurve, + required this.textStyle, }); @override @@ -31,11 +37,13 @@ class MoonModalProperties extends ThemeExtension with Diagn BorderRadiusGeometry? borderRadius, Duration? transitionDuration, Curve? transitionCurve, + TextStyle? textStyle, }) { return MoonModalProperties( borderRadius: borderRadius ?? this.borderRadius, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, + textStyle: textStyle ?? this.textStyle, ); } @@ -47,6 +55,7 @@ class MoonModalProperties extends ThemeExtension with Diagn borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, + textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @@ -57,6 +66,7 @@ class MoonModalProperties extends ThemeExtension with Diagn ..add(DiagnosticsProperty("type", "MoonModalProperties")) ..add(DiagnosticsProperty("borderRadius", borderRadius)) ..add(DiagnosticsProperty("transitionDuration", transitionDuration)) - ..add(DiagnosticsProperty("transitionCurve", transitionCurve)); + ..add(DiagnosticsProperty("transitionCurve", transitionCurve)) + ..add(DiagnosticsProperty("textStyle", textStyle)); } } diff --git a/lib/src/theme/popover/popover_colors.dart b/lib/src/theme/popover/popover_colors.dart index 4ee5cd86..0a92b156 100644 --- a/lib/src/theme/popover/popover_colors.dart +++ b/lib/src/theme/popover/popover_colors.dart @@ -2,28 +2,48 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/icons/icon_theme.dart'; +import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonPopoverColors extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonPopoverColors( + textColor: MoonTypography.light.colors.bodyPrimary, + iconColor: MoonIconTheme.light.colors.primaryColor, backgroundColor: MoonColors.light.gohan, ); static final dark = MoonPopoverColors( + textColor: MoonTypography.dark.colors.bodyPrimary, + iconColor: MoonIconTheme.dark.colors.primaryColor, backgroundColor: MoonColors.dark.gohan, ); + /// Popover text color. + final Color textColor; + + /// Popover icon color. + final Color iconColor; + /// Popover background color. final Color backgroundColor; const MoonPopoverColors({ + required this.textColor, + required this.iconColor, required this.backgroundColor, }); @override - MoonPopoverColors copyWith({Color? backgroundColor}) { + MoonPopoverColors copyWith({ + Color? textColor, + Color? iconColor, + Color? backgroundColor, + }) { return MoonPopoverColors( + textColor: textColor ?? this.textColor, + iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @@ -33,6 +53,8 @@ class MoonPopoverColors extends ThemeExtension with Diagnosti if (other is! MoonPopoverColors) return this; return MoonPopoverColors( + textColor: colorPremulLerp(textColor, other.textColor, t)!, + iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, ); } @@ -42,6 +64,8 @@ class MoonPopoverColors extends ThemeExtension with Diagnosti super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonPopoverColors")) + ..add(ColorProperty("textColor", textColor)) + ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } diff --git a/lib/src/theme/popover/popover_properties.dart b/lib/src/theme/popover/popover_properties.dart index 51d59ffe..213bf52b 100644 --- a/lib/src/theme/popover/popover_properties.dart +++ b/lib/src/theme/popover/popover_properties.dart @@ -5,6 +5,7 @@ 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 MoonPopoverProperties extends ThemeExtension with DiagnosticableTreeMixin { @@ -14,6 +15,7 @@ class MoonPopoverProperties extends ThemeExtension with D transitionDuration: const Duration(milliseconds: 150), transitionCurve: Curves.easeInOutCubic, contentPadding: EdgeInsets.all(MoonSizes.sizes.x3s), + textStyle: MoonTextStyles.body.textDefault, ); /// Popover border radius. @@ -31,12 +33,16 @@ class MoonPopoverProperties extends ThemeExtension with D /// Padding around popover content. final EdgeInsetsGeometry contentPadding; + /// Popover text style. + final TextStyle textStyle; + const MoonPopoverProperties({ required this.borderRadius, required this.distanceToTarget, required this.transitionDuration, required this.transitionCurve, required this.contentPadding, + required this.textStyle, }); @override @@ -46,6 +52,7 @@ class MoonPopoverProperties extends ThemeExtension with D Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? contentPadding, + TextStyle? textStyle, }) { return MoonPopoverProperties( borderRadius: borderRadius ?? this.borderRadius, @@ -53,6 +60,7 @@ class MoonPopoverProperties extends ThemeExtension with D transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, contentPadding: contentPadding ?? this.contentPadding, + textStyle: textStyle ?? this.textStyle, ); } @@ -66,6 +74,7 @@ class MoonPopoverProperties extends ThemeExtension with D transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, + textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @@ -78,6 +87,7 @@ class MoonPopoverProperties extends ThemeExtension with D ..add(DoubleProperty("distanceToTarget", distanceToTarget)) ..add(DiagnosticsProperty("transitionDuration", transitionDuration)) ..add(DiagnosticsProperty("transitionCurve", transitionCurve)) - ..add(DiagnosticsProperty("contentPadding", contentPadding)); + ..add(DiagnosticsProperty("contentPadding", contentPadding)) + ..add(DiagnosticsProperty("textStyle", textStyle)); } } diff --git a/lib/src/theme/radio/radio_colors.dart b/lib/src/theme/radio/radio_colors.dart index 3384abc3..0b9dc456 100644 --- a/lib/src/theme/radio/radio_colors.dart +++ b/lib/src/theme/radio/radio_colors.dart @@ -2,6 +2,7 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable @@ -9,11 +10,13 @@ class MoonRadioColors extends ThemeExtension with Diagnosticabl static final light = MoonRadioColors( activeColor: MoonColors.light.piccolo, inactiveColor: MoonColors.light.trunks, + textColor: MoonTypography.light.colors.bodyPrimary, ); static final dark = MoonRadioColors( activeColor: MoonColors.dark.piccolo, inactiveColor: MoonColors.dark.trunks, + textColor: MoonTypography.dark.colors.bodyPrimary, ); /// Radio active color. @@ -22,19 +25,25 @@ class MoonRadioColors extends ThemeExtension with Diagnosticabl /// Radio inactive color. final Color inactiveColor; + /// Radio text color. + final Color textColor; + const MoonRadioColors({ required this.activeColor, required this.inactiveColor, + required this.textColor, }); @override MoonRadioColors copyWith({ Color? activeColor, Color? inactiveColor, + Color? textColor, }) { return MoonRadioColors( activeColor: activeColor ?? this.activeColor, inactiveColor: inactiveColor ?? this.inactiveColor, + textColor: textColor ?? this.textColor, ); } @@ -45,6 +54,7 @@ class MoonRadioColors extends ThemeExtension with Diagnosticabl return MoonRadioColors( activeColor: colorPremulLerp(activeColor, other.activeColor, t)!, inactiveColor: colorPremulLerp(inactiveColor, other.inactiveColor, t)!, + textColor: colorPremulLerp(textColor, other.textColor, t)!, ); } @@ -54,6 +64,7 @@ class MoonRadioColors extends ThemeExtension with Diagnosticabl properties ..add(DiagnosticsProperty("type", "MoonRadioColors")) ..add(ColorProperty("activeColor", activeColor)) - ..add(ColorProperty("inactiveColor", inactiveColor)); + ..add(ColorProperty("inactiveColor", inactiveColor)) + ..add(ColorProperty("textColor", textColor)); } } diff --git a/lib/src/theme/radio/radio_properties.dart b/lib/src/theme/radio/radio_properties.dart new file mode 100644 index 00000000..628e654c --- /dev/null +++ b/lib/src/theme/radio/radio_properties.dart @@ -0,0 +1,44 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/typography/text_styles.dart'; + +@immutable +class MoonRadioProperties extends ThemeExtension with DiagnosticableTreeMixin { + static final properties = MoonRadioProperties( + textStyle: MoonTextStyles.body.textDefault, + ); + + /// Radio text style. + final TextStyle textStyle; + + const MoonRadioProperties({ + required this.textStyle, + }); + + @override + MoonRadioProperties copyWith({ + TextStyle? textStyle, + }) { + return MoonRadioProperties( + textStyle: textStyle ?? this.textStyle, + ); + } + + @override + MoonRadioProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonRadioProperties) return this; + + return MoonRadioProperties( + textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonRadioProperties")) + ..add(DiagnosticsProperty("textStyle", textStyle)); + } +} diff --git a/lib/src/theme/radio/radio_theme.dart b/lib/src/theme/radio/radio_theme.dart index 4845ef60..8fc07962 100644 --- a/lib/src/theme/radio/radio_theme.dart +++ b/lib/src/theme/radio/radio_theme.dart @@ -2,30 +2,39 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/radio/radio_colors.dart'; +import 'package:moon_design/src/theme/radio/radio_properties.dart'; @immutable class MoonRadioTheme extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonRadioTheme( colors: MoonRadioColors.light, + properties: MoonRadioProperties.properties, ); static final dark = MoonRadioTheme( colors: MoonRadioColors.dark, + properties: MoonRadioProperties.properties, ); /// Radio colors. final MoonRadioColors colors; + /// Radio properties. + final MoonRadioProperties properties; + const MoonRadioTheme({ required this.colors, + required this.properties, }); @override MoonRadioTheme copyWith({ MoonRadioColors? colors, + MoonRadioProperties? properties, }) { return MoonRadioTheme( colors: colors ?? this.colors, + properties: properties ?? this.properties, ); } @@ -35,6 +44,7 @@ class MoonRadioTheme extends ThemeExtension with DiagnosticableT return MoonRadioTheme( colors: colors.lerp(other.colors, t), + properties: properties.lerp(other.properties, t), ); } @@ -43,6 +53,7 @@ class MoonRadioTheme extends ThemeExtension with DiagnosticableT super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonRadioTheme")) - ..add(DiagnosticsProperty("colors", colors)); + ..add(DiagnosticsProperty("colors", colors)) + ..add(DiagnosticsProperty("properties", properties)); } } diff --git a/lib/src/theme/segmented_control/segmented_control_size_properties.dart b/lib/src/theme/segmented_control/segmented_control_size_properties.dart index a2aaed55..a9dd0534 100644 --- a/lib/src/theme/segmented_control/segmented_control_size_properties.dart +++ b/lib/src/theme/segmented_control/segmented_control_size_properties.dart @@ -16,7 +16,7 @@ class MoonSegmentedControlSizeProperties extends ThemeExtension with Diagnostica inactiveTrackColor: MoonColors.light.beerus, activeTextColor: MoonTypography.dark.colors.bodyPrimary, inactiveTextColor: MoonTypography.light.colors.bodyPrimary, - thumbIconColor: MoonTypography.light.colors.bodyPrimary, + activeIconColor: MoonIconTheme.dark.colors.primaryColor, + inactiveIconColor: MoonIconTheme.light.colors.primaryColor, + thumbIconColor: MoonIconTheme.light.colors.primaryColor, thumbColor: MoonColors.light.goten, ); @@ -21,7 +24,9 @@ class MoonSwitchColors extends ThemeExtension with Diagnostica inactiveTrackColor: MoonColors.dark.beerus, activeTextColor: MoonTypography.dark.colors.bodyPrimary, inactiveTextColor: MoonTypography.dark.colors.bodyPrimary, - thumbIconColor: MoonTypography.light.colors.bodyPrimary, + activeIconColor: MoonIconTheme.dark.colors.primaryColor, + inactiveIconColor: MoonIconTheme.dark.colors.primaryColor, + thumbIconColor: MoonIconTheme.light.colors.primaryColor, thumbColor: MoonColors.dark.goten, ); @@ -37,6 +42,12 @@ class MoonSwitchColors extends ThemeExtension with Diagnostica /// Switch inactive track text color. final Color inactiveTextColor; + /// Switch active track icon color. + final Color activeIconColor; + + /// Switch inactive track icon color. + final Color inactiveIconColor; + /// Switch icon Color. final Color thumbIconColor; @@ -48,6 +59,8 @@ class MoonSwitchColors extends ThemeExtension with Diagnostica required this.inactiveTrackColor, required this.activeTextColor, required this.inactiveTextColor, + required this.activeIconColor, + required this.inactiveIconColor, required this.thumbIconColor, required this.thumbColor, }); @@ -58,6 +71,8 @@ class MoonSwitchColors extends ThemeExtension with Diagnostica Color? inactiveTrackColor, Color? activeTextColor, Color? inactiveTextColor, + Color? activeIconColor, + Color? inactiveIconColor, Color? thumbIconColor, Color? thumbColor, }) { @@ -66,6 +81,8 @@ class MoonSwitchColors extends ThemeExtension with Diagnostica inactiveTrackColor: inactiveTrackColor ?? this.inactiveTrackColor, activeTextColor: activeTextColor ?? this.activeTextColor, inactiveTextColor: inactiveTextColor ?? this.inactiveTextColor, + activeIconColor: activeIconColor ?? this.activeIconColor, + inactiveIconColor: inactiveIconColor ?? this.inactiveIconColor, thumbIconColor: thumbIconColor ?? this.thumbIconColor, thumbColor: thumbColor ?? this.thumbColor, ); @@ -80,6 +97,8 @@ class MoonSwitchColors extends ThemeExtension with Diagnostica inactiveTrackColor: colorPremulLerp(inactiveTrackColor, other.inactiveTrackColor, t)!, activeTextColor: colorPremulLerp(activeTextColor, other.activeTextColor, t)!, inactiveTextColor: colorPremulLerp(inactiveTextColor, other.inactiveTextColor, t)!, + activeIconColor: colorPremulLerp(activeIconColor, other.activeIconColor, t)!, + inactiveIconColor: colorPremulLerp(inactiveIconColor, other.inactiveIconColor, t)!, thumbIconColor: colorPremulLerp(thumbIconColor, other.thumbIconColor, t)!, thumbColor: colorPremulLerp(thumbColor, other.thumbColor, t)!, ); @@ -94,6 +113,8 @@ class MoonSwitchColors extends ThemeExtension with Diagnostica ..add(ColorProperty("inactiveTrackColor", inactiveTrackColor)) ..add(ColorProperty("activeTextColor", activeTextColor)) ..add(ColorProperty("inactiveTextColor", inactiveTextColor)) + ..add(ColorProperty("activeIconColor", activeIconColor)) + ..add(ColorProperty("inactiveIconColor", inactiveIconColor)) ..add(ColorProperty("thumbIconColor", thumbIconColor)) ..add(ColorProperty("thumbColor", thumbColor)); } diff --git a/lib/src/theme/switch/switch_size_properties.dart b/lib/src/theme/switch/switch_size_properties.dart index da96e415..9cc5f5df 100644 --- a/lib/src/theme/switch/switch_size_properties.dart +++ b/lib/src/theme/switch/switch_size_properties.dart @@ -4,28 +4,35 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/sizes.dart'; +import 'package:moon_design/src/theme/typography/text_styles.dart'; @immutable class MoonSwitchSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { static final x2s = MoonSwitchSizeProperties( height: MoonSizes.sizes.x2s, - width: 2 * MoonSizes.sizes.x3s + 3 * MoonSizes.sizes.x6s, + width: 2 * MoonSizes.sizes.x3s + 2 * MoonSizes.sizes.x5s, thumbSizeValue: MoonSizes.sizes.x3s, + iconSizeValue: MoonSizes.sizes.x3s, padding: EdgeInsets.all(MoonSizes.sizes.x6s), + textStyle: MoonTextStyles.caption.text6.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1), ); static final xs = MoonSwitchSizeProperties( height: MoonSizes.sizes.xs, width: 2 * MoonSizes.sizes.x2s + 3 * MoonSizes.sizes.x5s, thumbSizeValue: MoonSizes.sizes.x2s, + iconSizeValue: MoonSizes.sizes.x2s, padding: EdgeInsets.all(MoonSizes.sizes.x5s), + textStyle: MoonTextStyles.caption.text8.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1), ); static final sm = MoonSwitchSizeProperties( height: MoonSizes.sizes.sm, width: 2 * MoonSizes.sizes.xs + 3 * MoonSizes.sizes.x5s, thumbSizeValue: MoonSizes.sizes.xs, + iconSizeValue: MoonSizes.sizes.xs, padding: EdgeInsets.all(MoonSizes.sizes.x5s), + textStyle: MoonTextStyles.caption.text10.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1), ); /// Switch height. @@ -37,14 +44,22 @@ class MoonSwitchSizeProperties extends ThemeExtension /// Switch thumb size. final double thumbSizeValue; + /// Switch icon size. + final double iconSizeValue; + /// Switch track padding. final EdgeInsetsGeometry padding; + /// Switch track text style. + final TextStyle textStyle; + const MoonSwitchSizeProperties({ required this.height, required this.width, required this.thumbSizeValue, + required this.iconSizeValue, required this.padding, + required this.textStyle, }); @override @@ -52,13 +67,17 @@ class MoonSwitchSizeProperties extends ThemeExtension double? height, double? width, double? thumbSizeValue, + double? iconSizeValue, EdgeInsetsGeometry? padding, + TextStyle? textStyle, }) { return MoonSwitchSizeProperties( height: height ?? this.height, width: width ?? this.width, thumbSizeValue: thumbSizeValue ?? this.thumbSizeValue, + iconSizeValue: iconSizeValue ?? this.iconSizeValue, padding: padding ?? this.padding, + textStyle: textStyle ?? this.textStyle, ); } @@ -70,7 +89,9 @@ class MoonSwitchSizeProperties extends ThemeExtension height: lerpDouble(height, other.height, t)!, width: lerpDouble(width, other.width, t)!, thumbSizeValue: lerpDouble(thumbSizeValue, other.thumbSizeValue, t)!, + iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, + textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @@ -82,6 +103,8 @@ class MoonSwitchSizeProperties extends ThemeExtension ..add(DoubleProperty("height", height)) ..add(DoubleProperty("width", width)) ..add(DoubleProperty("thumbSizeValue", thumbSizeValue)) - ..add(DiagnosticsProperty("padding", padding)); + ..add(DoubleProperty("iconSizeValue", iconSizeValue)) + ..add(DiagnosticsProperty("padding", padding)) + ..add(DiagnosticsProperty("textStyle", textStyle)); } } diff --git a/lib/src/theme/tab_bar/tab_bar_size_properties.dart b/lib/src/theme/tab_bar/tab_bar_size_properties.dart index c0390cfd..370a4d76 100644 --- a/lib/src/theme/tab_bar/tab_bar_size_properties.dart +++ b/lib/src/theme/tab_bar/tab_bar_size_properties.dart @@ -16,7 +16,7 @@ class MoonTabBarSizeProperties extends ThemeExtension iconSizeValue: MoonSizes.sizes.xs, indicatorHeight: MoonSizes.sizes.x6s, tabPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - textStyle: MoonTextStyles.heading.text14, + textStyle: MoonTextStyles.heading.textDefault, ); static final md = MoonTabBarSizeProperties( @@ -26,7 +26,7 @@ class MoonTabBarSizeProperties extends ThemeExtension iconSizeValue: MoonSizes.sizes.xs, indicatorHeight: MoonSizes.sizes.x6s, tabPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), - textStyle: MoonTextStyles.heading.text14, + textStyle: MoonTextStyles.heading.textDefault, ); /// TabBar pill tab border radius. diff --git a/lib/src/theme/tag/tag_colors.dart b/lib/src/theme/tag/tag_colors.dart index cbb6ff76..f87b7a6d 100644 --- a/lib/src/theme/tag/tag_colors.dart +++ b/lib/src/theme/tag/tag_colors.dart @@ -2,30 +2,48 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/icons/icon_theme.dart'; +import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonTagColors extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonTagColors( + textColor: MoonTypography.light.colors.bodyPrimary, + iconColor: MoonIconTheme.light.colors.primaryColor, backgroundColor: MoonColors.light.gohan, ); static final dark = MoonTagColors( + textColor: MoonTypography.dark.colors.bodyPrimary, + iconColor: MoonIconTheme.dark.colors.primaryColor, backgroundColor: MoonColors.dark.gohan, ); + /// Tag text color. + final Color textColor; + + /// Tag icon color. + final Color iconColor; + /// Tag background color. final Color backgroundColor; const MoonTagColors({ + required this.textColor, + required this.iconColor, required this.backgroundColor, }); @override MoonTagColors copyWith({ + Color? textColor, + Color? iconColor, Color? backgroundColor, }) { return MoonTagColors( + textColor: textColor ?? this.textColor, + iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @@ -35,6 +53,8 @@ class MoonTagColors extends ThemeExtension with DiagnosticableTre if (other is! MoonTagColors) return this; return MoonTagColors( + textColor: colorPremulLerp(textColor, other.textColor, t)!, + iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, ); } @@ -44,6 +64,8 @@ class MoonTagColors extends ThemeExtension with DiagnosticableTre super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTagColors")) + ..add(ColorProperty("textColor", textColor)) + ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } diff --git a/lib/src/theme/text_input/text_input_size_properties.dart b/lib/src/theme/text_input/text_input_size_properties.dart index 35c4bbea..06992e09 100644 --- a/lib/src/theme/text_input/text_input_size_properties.dart +++ b/lib/src/theme/text_input/text_input_size_properties.dart @@ -18,7 +18,7 @@ class MoonTextInputSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { circularProgressTheme: MoonCircularProgressTheme.light, colors: MoonColors.light, effects: MoonEffects.light, + iconTheme: MoonIconTheme.light, linearLoaderTheme: MoonLinearLoaderTheme.light, linearProgressTheme: MoonLinearProgressTheme.light, modalTheme: MoonModalTheme.light, @@ -78,6 +80,7 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { circularProgressTheme: MoonCircularProgressTheme.dark, colors: MoonColors.dark, effects: MoonEffects.dark, + iconTheme: MoonIconTheme.dark, linearLoaderTheme: MoonLinearLoaderTheme.dark, linearProgressTheme: MoonLinearProgressTheme.dark, modalTheme: MoonModalTheme.dark, @@ -133,6 +136,9 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { /// Moon Design System effects. final MoonEffects effects; + /// Moon Design System icons theming. + final MoonIconTheme iconTheme; + /// Moon Design System MoonLinearLoader widget theming. final MoonLinearLoaderTheme linearLoaderTheme; @@ -197,6 +203,7 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { required this.circularProgressTheme, required this.colors, required this.effects, + required this.iconTheme, required this.linearLoaderTheme, required this.linearProgressTheme, required this.modalTheme, @@ -230,6 +237,7 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { MoonCircularProgressTheme? circularProgressTheme, MoonColors? colors, MoonEffects? effects, + MoonIconTheme? iconTheme, MoonLinearLoaderTheme? linearLoaderTheme, MoonLinearProgressTheme? linearProgressTheme, MoonModalTheme? modalTheme, @@ -261,6 +269,7 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { circularProgressTheme: circularProgressTheme ?? this.circularProgressTheme, colors: colors ?? this.colors, effects: effects ?? this.effects, + iconTheme: iconTheme ?? this.iconTheme, linearLoaderTheme: linearLoaderTheme ?? this.linearLoaderTheme, linearProgressTheme: linearProgressTheme ?? this.linearProgressTheme, modalTheme: modalTheme ?? this.modalTheme, @@ -298,6 +307,7 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { circularProgressTheme: circularProgressTheme.lerp(other.circularProgressTheme, t), colors: colors.lerp(other.colors, t), effects: effects.lerp(other.effects, t), + iconTheme: iconTheme.lerp(other.iconTheme, t), linearLoaderTheme: linearLoaderTheme.lerp(other.linearLoaderTheme, t), linearProgressTheme: linearProgressTheme.lerp(other.linearProgressTheme, t), modalTheme: modalTheme.lerp(other.modalTheme, t), @@ -335,6 +345,7 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { ..add(DiagnosticsProperty("MoonCircularProgressTheme", circularProgressTheme)) ..add(DiagnosticsProperty("MoonColors", colors)) ..add(DiagnosticsProperty("MoonEffects", effects)) + ..add(DiagnosticsProperty("MoonIconTheme", iconTheme)) ..add(DiagnosticsProperty("MoonLinearLoaderTheme", linearLoaderTheme)) ..add(DiagnosticsProperty("MoonLinearProgressTheme", linearProgressTheme)) ..add(DiagnosticsProperty("MoonModalTheme", modalTheme)) @@ -364,6 +375,8 @@ extension MoonThemeX on BuildContext { MoonEffects? get moonEffects => moonTheme?.effects; + MoonIconTheme? get moonIconTheme => moonTheme?.iconTheme; + MoonOpacity? get moonOpacity => moonTheme?.opacity; MoonShadows? get moonShadows => moonTheme?.shadows; diff --git a/lib/src/theme/toast/toast_colors.dart b/lib/src/theme/toast/toast_colors.dart index 8e4608e2..7eb7cd43 100644 --- a/lib/src/theme/toast/toast_colors.dart +++ b/lib/src/theme/toast/toast_colors.dart @@ -2,6 +2,7 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/icons/icon_colors.dart'; import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @@ -12,6 +13,8 @@ class MoonToastColors extends ThemeExtension with Diagnosticabl darkVariantBackgroundColor: MoonColors.dark.gohan, lightVariantTextColor: MoonTypography.light.colors.bodyPrimary, darkVariantTextColor: MoonTypography.dark.colors.bodyPrimary, + lightVariantIconColor: MoonIconColors.light.primaryColor, + darkVariantIconColor: MoonIconColors.dark.primaryColor, ); static final dark = MoonToastColors( @@ -19,6 +22,8 @@ class MoonToastColors extends ThemeExtension with Diagnosticabl darkVariantBackgroundColor: MoonColors.light.gohan, lightVariantTextColor: MoonTypography.dark.colors.bodyPrimary, darkVariantTextColor: MoonTypography.light.colors.bodyPrimary, + lightVariantIconColor: MoonIconColors.dark.primaryColor, + darkVariantIconColor: MoonIconColors.light.primaryColor, ); /// Toast light variant background color. @@ -33,11 +38,19 @@ class MoonToastColors extends ThemeExtension with Diagnosticabl /// Toast dark variant text color. final Color darkVariantTextColor; + /// Toast light variant icon color. + final Color lightVariantIconColor; + + /// Toast dark variant icon color. + final Color darkVariantIconColor; + const MoonToastColors({ required this.lightVariantBackgroundColor, required this.darkVariantBackgroundColor, required this.lightVariantTextColor, required this.darkVariantTextColor, + required this.lightVariantIconColor, + required this.darkVariantIconColor, }); @override @@ -46,12 +59,16 @@ class MoonToastColors extends ThemeExtension with Diagnosticabl Color? darkVariantBackgroundColor, Color? lightVariantTextColor, Color? darkVariantTextColor, + Color? lightVariantIconColor, + Color? darkVariantIconColor, }) { return MoonToastColors( lightVariantBackgroundColor: lightVariantBackgroundColor ?? this.lightVariantBackgroundColor, darkVariantBackgroundColor: darkVariantBackgroundColor ?? this.darkVariantBackgroundColor, lightVariantTextColor: lightVariantTextColor ?? this.lightVariantTextColor, darkVariantTextColor: darkVariantTextColor ?? this.darkVariantTextColor, + lightVariantIconColor: lightVariantIconColor ?? this.lightVariantIconColor, + darkVariantIconColor: darkVariantIconColor ?? this.darkVariantIconColor, ); } @@ -64,6 +81,8 @@ class MoonToastColors extends ThemeExtension with Diagnosticabl darkVariantBackgroundColor: colorPremulLerp(darkVariantBackgroundColor, other.darkVariantBackgroundColor, t)!, lightVariantTextColor: colorPremulLerp(lightVariantTextColor, other.lightVariantTextColor, t)!, darkVariantTextColor: colorPremulLerp(darkVariantTextColor, other.darkVariantTextColor, t)!, + lightVariantIconColor: colorPremulLerp(lightVariantIconColor, other.lightVariantIconColor, t)!, + darkVariantIconColor: colorPremulLerp(darkVariantIconColor, other.darkVariantIconColor, t)!, ); } @@ -75,6 +94,8 @@ class MoonToastColors extends ThemeExtension with Diagnosticabl ..add(ColorProperty("lightVariantBackgroundColor", lightVariantBackgroundColor)) ..add(ColorProperty("darkVariantBackgroundColor", darkVariantBackgroundColor)) ..add(ColorProperty("lightVariantTextColor", lightVariantTextColor)) - ..add(ColorProperty("darkVariantTextColor", darkVariantTextColor)); + ..add(ColorProperty("darkVariantTextColor", darkVariantTextColor)) + ..add(ColorProperty("lightVariantIconColor", lightVariantIconColor)) + ..add(ColorProperty("darkVariantIconColor", darkVariantIconColor)); } } diff --git a/lib/src/theme/toast/toast_properties.dart b/lib/src/theme/toast/toast_properties.dart index db517d03..4f1976e0 100644 --- a/lib/src/theme/toast/toast_properties.dart +++ b/lib/src/theme/toast/toast_properties.dart @@ -5,6 +5,7 @@ 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 MoonToastProperties extends ThemeExtension with DiagnosticableTreeMixin { @@ -15,6 +16,7 @@ class MoonToastProperties extends ThemeExtension with Diagn transitionDuration: const Duration(milliseconds: 200), transitionCurve: Curves.easeInOutCubic, contentPadding: EdgeInsets.all(MoonSizes.sizes.x2s), + textStyle: MoonTextStyles.body.textDefault, ); /// Toast border radius. @@ -35,6 +37,9 @@ class MoonToastProperties extends ThemeExtension with Diagn /// Padding around toast content. final EdgeInsetsGeometry contentPadding; + /// Toast text style. + final TextStyle textStyle; + const MoonToastProperties({ required this.borderRadius, required this.gap, @@ -42,6 +47,7 @@ class MoonToastProperties extends ThemeExtension with Diagn required this.transitionDuration, required this.transitionCurve, required this.contentPadding, + required this.textStyle, }); @override @@ -52,6 +58,7 @@ class MoonToastProperties extends ThemeExtension with Diagn Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? contentPadding, + TextStyle? textStyle, }) { return MoonToastProperties( borderRadius: borderRadius ?? this.borderRadius, @@ -60,6 +67,7 @@ class MoonToastProperties extends ThemeExtension with Diagn transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, contentPadding: contentPadding ?? this.contentPadding, + textStyle: textStyle ?? this.textStyle, ); } @@ -74,6 +82,7 @@ class MoonToastProperties extends ThemeExtension with Diagn transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, + textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @@ -87,6 +96,7 @@ class MoonToastProperties extends ThemeExtension with Diagn ..add(DiagnosticsProperty("displayDuration", displayDuration)) ..add(DiagnosticsProperty("transitionDuration", transitionDuration)) ..add(DiagnosticsProperty("transitionCurve", transitionCurve)) - ..add(DiagnosticsProperty("contentPadding", contentPadding)); + ..add(DiagnosticsProperty("contentPadding", contentPadding)) + ..add(DiagnosticsProperty("textStyle", textStyle)); } } diff --git a/lib/src/theme/tooltip/tooltip_colors.dart b/lib/src/theme/tooltip/tooltip_colors.dart index e0de7802..95705cb1 100644 --- a/lib/src/theme/tooltip/tooltip_colors.dart +++ b/lib/src/theme/tooltip/tooltip_colors.dart @@ -2,28 +2,48 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/icons/icon_theme.dart'; +import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonTooltipColors extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonTooltipColors( + textColor: MoonTypography.light.colors.bodyPrimary, + iconColor: MoonIconTheme.light.colors.primaryColor, backgroundColor: MoonColors.light.gohan, ); static final dark = MoonTooltipColors( + textColor: MoonTypography.dark.colors.bodyPrimary, + iconColor: MoonIconTheme.dark.colors.primaryColor, backgroundColor: MoonColors.dark.gohan, ); + /// Tooltip text color. + final Color textColor; + + /// Tooltip icon color. + final Color iconColor; + /// Tooltip background color. final Color backgroundColor; const MoonTooltipColors({ + required this.textColor, + required this.iconColor, required this.backgroundColor, }); @override - MoonTooltipColors copyWith({Color? backgroundColor}) { + MoonTooltipColors copyWith({ + Color? textColor, + Color? iconColor, + Color? backgroundColor, + }) { return MoonTooltipColors( + textColor: textColor ?? this.textColor, + iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @@ -33,6 +53,8 @@ class MoonTooltipColors extends ThemeExtension with Diagnosti if (other is! MoonTooltipColors) return this; return MoonTooltipColors( + textColor: colorPremulLerp(textColor, other.textColor, t)!, + iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, ); } @@ -42,6 +64,8 @@ class MoonTooltipColors extends ThemeExtension with Diagnosti super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTooltipColors")) + ..add(ColorProperty("textColor", textColor)) + ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } diff --git a/lib/src/theme/typography/text_colors.dart b/lib/src/theme/typography/text_colors.dart index 5192aac0..562b8ce5 100644 --- a/lib/src/theme/typography/text_colors.dart +++ b/lib/src/theme/typography/text_colors.dart @@ -20,16 +20,16 @@ class MoonTextColors extends ThemeExtension with DiagnosticableT controlSecondary: MoonColors.dark.popo, ); - /// Primary body text and icon color. + /// Primary body text color. final Color bodyPrimary; - /// Primary body text and icon color. + /// Primary body text color. final Color bodySecondary; - /// Primary control element (button, chip, etc) text and icon color. + /// Primary control element (button, chip, etc) text color. final Color controlPrimary; - /// Secondary control element (button, chip, etc) text and icon color. + /// Secondary control element (button, chip, etc) text color. final Color controlSecondary; const MoonTextColors({ diff --git a/lib/src/theme/typography/text_styles.dart b/lib/src/theme/typography/text_styles.dart index 63d7889f..c7ff90ba 100644 --- a/lib/src/theme/typography/text_styles.dart +++ b/lib/src/theme/typography/text_styles.dart @@ -6,6 +6,9 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT static const _semiBold = FontWeight.w600; static const body = MoonTextStyles( + textDefault: TextStyle( + fontSize: 14, + ), text6: TextStyle( fontSize: 6, ), @@ -54,6 +57,10 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT ); static const heading = MoonTextStyles( + textDefault: TextStyle( + fontSize: 14, + fontWeight: _semiBold, + ), text6: TextStyle( fontSize: 6, fontWeight: _semiBold, @@ -117,6 +124,12 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT ); static const caption = MoonTextStyles( + textDefault: TextStyle( + fontSize: 14, + height: 1.2, + letterSpacing: 1, + fontWeight: _semiBold, + ), text6: TextStyle( fontSize: 6, height: 1.1, @@ -209,10 +222,13 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT ), ); - /// Text size 9. + /// Default text size. + final TextStyle textDefault; + + /// Text size 6. final TextStyle text6; - /// Text size 9. + /// Text size 8. final TextStyle text8; /// Text size 9. @@ -255,6 +271,7 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT final TextStyle text72; const MoonTextStyles({ + required this.textDefault, required this.text6, required this.text8, required this.text9, @@ -274,6 +291,7 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT @override MoonTextStyles copyWith({ + TextStyle? textDefault, TextStyle? text6, TextStyle? text8, TextStyle? text9, @@ -291,6 +309,7 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT TextStyle? text72, }) { return MoonTextStyles( + textDefault: textDefault ?? this.textDefault, text6: text6 ?? this.text6, text8: text8 ?? this.text8, text9: text9 ?? this.text9, @@ -314,6 +333,7 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT if (other is! MoonTextStyles) return this; return MoonTextStyles( + textDefault: TextStyle.lerp(textDefault, other.textDefault, t)!, text6: TextStyle.lerp(text6, other.text6, t)!, text8: TextStyle.lerp(text8, other.text8, t)!, text9: TextStyle.lerp(text9, other.text9, t)!, @@ -337,6 +357,7 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTextStyles")) + ..add(DiagnosticsProperty("textDefault", textDefault)) ..add(DiagnosticsProperty("text6", text6)) ..add(DiagnosticsProperty("text8", text8)) ..add(DiagnosticsProperty("text9", text9)) diff --git a/lib/src/widgets/alert/alert.dart b/lib/src/widgets/alert/alert.dart index cb28c85f..aa935326 100644 --- a/lib/src/widgets/alert/alert.dart +++ b/lib/src/widgets/alert/alert.dart @@ -127,9 +127,9 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix if (widget.titleTextStyle != null) return widget.titleTextStyle!; if (widget.body != null) { - return context.moonTheme?.alertTheme.properties.titleTextStyle ?? MoonTextStyles.heading.text14; + return context.moonTheme?.alertTheme.properties.titleTextStyle ?? MoonTextStyles.heading.textDefault; } else { - return context.moonTheme?.alertTheme.properties.bodyTextStyle ?? MoonTextStyles.body.text14; + return context.moonTheme?.alertTheme.properties.bodyTextStyle ?? MoonTextStyles.body.textDefault; } } @@ -217,8 +217,9 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix final TextStyle effectiveTitleTextStyle = _getTextStyle(context: context); - final TextStyle effectiveBodyTextStyle = - widget.bodyTextStyle ?? context.moonTheme?.alertTheme.properties.bodyTextStyle ?? MoonTextStyles.body.text14; + final TextStyle effectiveBodyTextStyle = widget.bodyTextStyle ?? + context.moonTheme?.alertTheme.properties.bodyTextStyle ?? + MoonTextStyles.body.textDefault; final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.alertTheme.properties.transitionDuration ?? diff --git a/lib/src/widgets/authcode/authcode.dart b/lib/src/widgets/authcode/authcode.dart index a8470125..0692148e 100644 --- a/lib/src/widgets/authcode/authcode.dart +++ b/lib/src/widgets/authcode/authcode.dart @@ -85,9 +85,6 @@ class MoonAuthCode extends StatefulWidget { /// [enableInputFill] has to be set true. final Color? inactiveFillColor; - /// AuthCode text color - final Color? textColor; - /// Border width for the auth input field. final double? borderWidth; @@ -217,7 +214,6 @@ class MoonAuthCode extends StatefulWidget { this.selectedFillColor, this.activeFillColor, this.inactiveFillColor, - this.textColor, this.height, this.width, this.borderWidth, @@ -711,9 +707,7 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix _effectiveErrorTextStyle = context.moonTheme?.authCodeTheme.properties.errorTextStyle ?? MoonTextStyles.body.text12; - _effectiveTextColor = widget.textColor ?? - context.moonTheme?.authCodeTheme.colors.textColor ?? - MoonTypography.light.colors.bodyPrimary; + _effectiveTextColor = context.moonTheme?.authCodeTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; _effectiveCursorColor = widget.authFieldCursorColor ?? context.moonTheme?.authCodeTheme.colors.textColor ?? diff --git a/lib/src/widgets/avatar/avatar.dart b/lib/src/widgets/avatar/avatar.dart index 0a4b8ddc..9c99ab4f 100644 --- a/lib/src/widgets/avatar/avatar.dart +++ b/lib/src/widgets/avatar/avatar.dart @@ -3,6 +3,7 @@ import 'package:flutter/material.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/icons/icon_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; @@ -39,9 +40,6 @@ class MoonAvatar extends StatelessWidget { /// The color of the avatar badge. final Color? badgeColor; - /// The text color of the avatar. - final Color? textColor; - /// The margin value of the avatars badge. final double? badgeMarginValue; @@ -76,7 +74,6 @@ class MoonAvatar extends StatelessWidget { this.borderRadius, this.backgroundColor, this.badgeColor, - this.textColor, this.badgeMarginValue, this.badgeSize, this.height, @@ -153,7 +150,10 @@ class MoonAvatar extends StatelessWidget { badgeColor ?? context.moonTheme?.avatarTheme.colors.badgeColor ?? MoonColors.light.roshi100; final Color effectiveTextColor = - textColor ?? context.moonTypography?.colors.bodyPrimary ?? MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.avatarTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + + final Color effectiveIconColor = + context.moonTheme?.avatarTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; final double effectiveAvatarHeight = height ?? effectiveMoonAvatarSize.avatarSizeValue; @@ -189,22 +189,27 @@ class MoonAvatar extends StatelessWidget { badgeAlignment: badgeAlignment, textDirection: Directionality.of(context), ), - child: DefaultTextStyle.merge( + child: DefaultTextStyle( style: effectiveMoonAvatarSize.textStyle.copyWith(color: effectiveTextColor), - child: DecoratedBox( - decoration: ShapeDecorationWithPremultipliedAlpha( - color: effectiveBackgroundColor, - image: backgroundImage != null - ? DecorationImage( - image: backgroundImage!, - fit: BoxFit.cover, - ) - : null, - shape: MoonSquircleBorder( - borderRadius: resolvedBorderRadius.squircleBorderRadius(context), + child: IconTheme( + data: IconThemeData( + color: effectiveIconColor, + ), + child: DecoratedBox( + decoration: ShapeDecorationWithPremultipliedAlpha( + color: effectiveBackgroundColor, + image: backgroundImage != null + ? DecorationImage( + image: backgroundImage!, + fit: BoxFit.cover, + ) + : null, + shape: MoonSquircleBorder( + borderRadius: resolvedBorderRadius.squircleBorderRadius(context), + ), ), + child: Center(child: content), ), - child: Center(child: content), ), ), ), diff --git a/lib/src/widgets/checkbox/checkbox.dart b/lib/src/widgets/checkbox/checkbox.dart index 8fa86021..31916d62 100644 --- a/lib/src/widgets/checkbox/checkbox.dart +++ b/lib/src/widgets/checkbox/checkbox.dart @@ -5,6 +5,7 @@ import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/effects/focus_effects.dart'; import 'package:moon_design/src/theme/opacity.dart'; import 'package:moon_design/src/theme/theme.dart'; +import 'package:moon_design/src/theme/typography/text_styles.dart'; import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -88,17 +89,19 @@ class MoonCheckbox extends StatefulWidget { Color? inactiveColor, double tapAreaSizeValue = 40, FocusNode? focusNode, + TextStyle? textStyle, required String label, required ValueChanged? onChanged, }) { final bool isInteractive = onChanged != null; final Color effectiveTextColor = - context.moonTypography?.colors.bodyPrimary ?? MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.checkboxTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; final TextStyle effectiveTextStyle = - context.moonTheme?.typography.body.text14.copyWith(color: effectiveTextColor) ?? - TextStyle(fontSize: 14, color: effectiveTextColor); + context.moonTheme?.checkboxTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; + + final TextStyle resolvedTextStyle = effectiveTextStyle.copyWith(color: effectiveTextColor).merge(textStyle); final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; @@ -132,9 +135,9 @@ class MoonCheckbox extends StatefulWidget { child: AnimatedOpacity( opacity: isInteractive ? 1 : effectiveDisabledOpacityValue, duration: effectiveFocusEffectDuration, - child: Text( - label, - style: effectiveTextStyle, + child: DefaultTextStyle( + style: resolvedTextStyle, + child: Text(label), ), ), ), diff --git a/lib/src/widgets/modal/modal.dart b/lib/src/widgets/modal/modal.dart index 7a33f466..964b9813 100644 --- a/lib/src/widgets/modal/modal.dart +++ b/lib/src/widgets/modal/modal.dart @@ -2,7 +2,9 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/borders.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/icons/icon_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; +import 'package:moon_design/src/theme/typography/text_styles.dart'; import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; @@ -42,14 +44,20 @@ class MoonModal extends StatelessWidget { backgroundColor ?? context.moonTheme?.modalTheme.colors.backgroundColor ?? MoonColors.light.gohan; final Color effectiveTextColor = - context.moonTypography?.colors.bodyPrimary ?? MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.modalTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + + final Color effectiveIconColor = + context.moonTheme?.modalTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; + + final TextStyle effectiveTextStyle = + context.moonTheme?.modalTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; return Semantics( label: semanticLabel, child: IconTheme( - data: IconThemeData(color: effectiveTextColor), + data: IconThemeData(color: effectiveIconColor), child: DefaultTextStyle( - style: DefaultTextStyle.of(context).style.copyWith(color: effectiveTextColor), + style: effectiveTextStyle.copyWith(color: effectiveTextColor), child: Center( child: Container( decoration: decoration ?? diff --git a/lib/src/widgets/popover/popover.dart b/lib/src/widgets/popover/popover.dart index b67d8063..a1bdc7f9 100644 --- a/lib/src/widgets/popover/popover.dart +++ b/lib/src/widgets/popover/popover.dart @@ -1,8 +1,10 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/icons/icon_theme.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/theme/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; @@ -352,7 +354,13 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP widget.backgroundColor ?? context.moonTheme?.popoverTheme.colors.backgroundColor ?? MoonColors.light.gohan; final Color effectiveTextColor = - context.moonTypography?.colors.bodyPrimary ?? MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.popoverTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + + final Color effectiveIconColor = + context.moonTheme?.popoverTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; + + final TextStyle effectiveTextStyle = + context.moonTheme?.popoverTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; final double effectiveDistanceToTarget = widget.distanceToTarget ?? context.moonTheme?.popoverTheme.properties.distanceToTarget ?? 8; @@ -440,9 +448,9 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP child: FadeTransition( opacity: _curvedAnimation!, child: IconTheme( - data: IconThemeData(color: effectiveTextColor), + data: IconThemeData(color: effectiveIconColor), child: DefaultTextStyle( - style: DefaultTextStyle.of(context).style.copyWith(color: effectiveTextColor), + style: effectiveTextStyle.copyWith(color: effectiveTextColor), child: Container( key: _popoverKey, constraints: BoxConstraints(maxWidth: popoverPositionParameters.popoverMaxWidth), diff --git a/lib/src/widgets/radio/radio.dart b/lib/src/widgets/radio/radio.dart index 09e8b064..1163e1b9 100644 --- a/lib/src/widgets/radio/radio.dart +++ b/lib/src/widgets/radio/radio.dart @@ -4,6 +4,7 @@ import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/effects/focus_effects.dart'; import 'package:moon_design/src/theme/opacity.dart'; import 'package:moon_design/src/theme/theme.dart'; +import 'package:moon_design/src/theme/typography/text_styles.dart'; import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/touch_target_padding.dart'; import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; @@ -97,6 +98,7 @@ class MoonRadio extends StatefulWidget { Color? inactiveColor, double tapAreaSizeValue = 40, FocusNode? focusNode, + TextStyle? textStyle, required String label, required T value, required T? groupValue, @@ -105,17 +107,18 @@ class MoonRadio extends StatefulWidget { final bool isInteractive = onChanged != null; final Color effectiveTextColor = - context.moonTypography?.colors.bodyPrimary ?? MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.radioTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + + final TextStyle effectiveTextStyle = + context.moonTheme?.radioTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; + + final TextStyle resolvedTextStyle = effectiveTextStyle.copyWith(color: effectiveTextColor).merge(textStyle); final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; - final TextStyle effectiveTextStyle = - context.moonTheme?.typography.body.text14.copyWith(color: effectiveTextColor) ?? - TextStyle(fontSize: 14, color: effectiveTextColor); - return GestureDetector( onTap: () => onChanged?.call(value), child: MouseRegion( @@ -141,9 +144,9 @@ class MoonRadio extends StatefulWidget { AnimatedOpacity( opacity: isInteractive ? 1 : effectiveDisabledOpacityValue, duration: effectiveFocusEffectDuration, - child: Text( - label, - style: effectiveTextStyle, + child: DefaultTextStyle( + style: resolvedTextStyle, + child: Text(label), ), ), ], diff --git a/lib/src/widgets/switch/switch.dart b/lib/src/widgets/switch/switch.dart index 7d924487..9df15d13 100644 --- a/lib/src/widgets/switch/switch.dart +++ b/lib/src/widgets/switch/switch.dart @@ -3,6 +3,7 @@ import 'package:flutter/services.dart'; import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/effects/focus_effects.dart'; +import 'package:moon_design/src/theme/icons/icon_theme.dart'; import 'package:moon_design/src/theme/opacity.dart'; import 'package:moon_design/src/theme/shadows.dart'; import 'package:moon_design/src/theme/switch/switch_size_properties.dart'; @@ -383,14 +384,21 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM ), ); - final Color thumbIconColor= context.moonTheme?.switchTheme.colors.thumbIconColor ?? MoonTypography.light.colors.bodyPrimary; - - final Color activeTextColor = + final Color effectiveActiveTextColor = context.moonTheme?.switchTheme.colors.activeTextColor ?? MoonTypography.dark.colors.bodyPrimary; - final Color inactiveTextColor = + final Color effectiveInactiveTextColor = context.moonTheme?.switchTheme.colors.inactiveTextColor ?? MoonTypography.light.colors.bodyPrimary; + final Color effectiveActiveIconColor = + context.moonTheme?.switchTheme.colors.activeIconColor ?? MoonIconTheme.dark.colors.primaryColor; + + final Color effectiveInactiveIconColor = + context.moonTheme?.switchTheme.colors.inactiveIconColor ?? MoonIconTheme.light.colors.primaryColor; + + final Color effectiveThumbIconColor = + context.moonTheme?.switchTheme.colors.thumbIconColor ?? MoonIconTheme.light.colors.primaryColor; + return Semantics( label: widget.semanticLabel, toggled: widget.value, @@ -437,9 +445,14 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM mainAxisAlignment: MainAxisAlignment.center, children: [ IconTheme( - data: IconThemeData(color: activeTextColor), + data: IconThemeData( + color: effectiveActiveIconColor, + size: effectiveMoonSwitchSize.iconSizeValue, + ), child: DefaultTextStyle( - style: TextStyle(color: activeTextColor), + style: effectiveMoonSwitchSize.textStyle.copyWith( + color: effectiveActiveTextColor, + ), child: Expanded( child: FadeTransition( opacity: _activeTrackWidgetFadeAnimation!, @@ -450,9 +463,14 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM ), SizedBox(width: resolvedDirectionalPadding.left), IconTheme( - data: IconThemeData(color: inactiveTextColor), + data: IconThemeData( + color: effectiveInactiveIconColor, + size: effectiveMoonSwitchSize.iconSizeValue, + ), child: DefaultTextStyle( - style: TextStyle(color: inactiveTextColor), + style: effectiveMoonSwitchSize.textStyle.copyWith( + color: effectiveInactiveTextColor, + ), child: Expanded( child: FadeTransition( opacity: _inactiveTrackWidgetFadeAnimation!, @@ -467,11 +485,13 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM alignment: _alignmentAnimation!.value, child: IconTheme( data: IconThemeData( - color: thumbIconColor, - size: effectiveThumbSizeValue, + color: effectiveThumbIconColor, + size: effectiveMoonSwitchSize.iconSizeValue, ), child: DefaultTextStyle( - style: TextStyle(color: inactiveTextColor), + style: effectiveMoonSwitchSize.textStyle.copyWith( + color: effectiveInactiveTextColor, + ), child: MoonFocusEffect( show: _isFocused, effectColor: effectiveFocusEffectColor, diff --git a/lib/src/widgets/tag/tag.dart b/lib/src/widgets/tag/tag.dart index 6d245798..c6bd82a5 100644 --- a/lib/src/widgets/tag/tag.dart +++ b/lib/src/widgets/tag/tag.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/icons/icon_theme.dart'; import 'package:moon_design/src/theme/tag/tag_size_properties.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/typography/typography.dart'; @@ -23,9 +24,6 @@ class MoonTag extends StatelessWidget { /// The background color of the tag. final Color? backgroundColor; - /// The text color of the tag. - final Color? textColor; - /// The height of the tag. final double? height; @@ -68,7 +66,6 @@ class MoonTag extends StatelessWidget { this.isUpperCase = true, this.borderRadius, this.backgroundColor, - this.textColor, this.height, this.width, this.gap, @@ -104,7 +101,10 @@ class MoonTag extends StatelessWidget { backgroundColor ?? context.moonTheme?.tagTheme.colors.backgroundColor ?? MoonColors.light.gohan; final Color effectiveTextColor = - textColor ?? context.moonTypography?.colors.bodyPrimary ?? MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.tagTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + + final Color effectiveIconColor = + context.moonTheme?.tagTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; final double effectiveHeight = height ?? effectiveMoonTagSize.height; @@ -146,10 +146,10 @@ class MoonTag extends StatelessWidget { ), child: IconTheme( data: IconThemeData( - color: effectiveTextColor, + color: effectiveIconColor, size: effectiveMoonTagSize.iconSizeValue, ), - child: DefaultTextStyle.merge( + child: DefaultTextStyle( style: isUpperCase ? effectiveMoonTagSize.upperCaseTextStyle.copyWith(color: effectiveTextColor) : effectiveMoonTagSize.textStyle.copyWith(color: effectiveTextColor), diff --git a/lib/src/widgets/toast/toast.dart b/lib/src/widgets/toast/toast.dart index 719c4cb6..a5328587 100644 --- a/lib/src/widgets/toast/toast.dart +++ b/lib/src/widgets/toast/toast.dart @@ -4,9 +4,11 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/borders.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/icons/icon_theme.dart'; import 'package:moon_design/src/theme/shadows.dart'; import 'package:moon_design/src/theme/sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; +import 'package:moon_design/src/theme/typography/text_styles.dart'; import 'package:moon_design/src/theme/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; @@ -102,10 +104,17 @@ class MoonToast { ? (context.moonTheme?.toastTheme.colors.lightVariantBackgroundColor ?? MoonColors.light.gohan) : (context.moonTheme?.toastTheme.colors.darkVariantBackgroundColor ?? MoonColors.dark.gohan)); - final Color effectiveElementColor = variant == MoonToastVariant.original + final Color effectiveTextColor = variant == MoonToastVariant.original ? (context.moonTheme?.toastTheme.colors.lightVariantTextColor ?? MoonTypography.light.colors.bodyPrimary) : (context.moonTheme?.toastTheme.colors.darkVariantTextColor ?? MoonTypography.dark.colors.bodyPrimary); + final Color effectiveIconColor = variant == MoonToastVariant.original + ? (context.moonTheme?.toastTheme.colors.lightVariantIconColor ?? MoonIconTheme.light.colors.primaryColor) + : (context.moonTheme?.toastTheme.colors.darkVariantIconColor ?? MoonIconTheme.dark.colors.primaryColor); + + final TextStyle effectiveTextStyle = + context.moonTheme?.toastTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; + final double effectiveGap = gap ?? context.moonTheme?.toastTheme.properties.gap ?? MoonSizes.sizes.x2s; final Duration effectiveDisplayDuration = displayDuration ?? @@ -162,11 +171,9 @@ class MoonToast { Semantics( label: semanticLabel, child: IconTheme( - data: IconThemeData( - color: effectiveElementColor, - ), + data: IconThemeData(color: effectiveIconColor), child: DefaultTextStyle( - style: DefaultTextStyle.of(context).style.copyWith(color: effectiveElementColor), + style: effectiveTextStyle.copyWith(color: effectiveTextColor), child: Container( margin: margin ?? resolvedContentPadding, padding: resolvedContentPadding, diff --git a/lib/src/widgets/tooltip/tooltip.dart b/lib/src/widgets/tooltip/tooltip.dart index 420cdf83..6e7efb79 100644 --- a/lib/src/widgets/tooltip/tooltip.dart +++ b/lib/src/widgets/tooltip/tooltip.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/borders.dart'; import 'package:moon_design/src/theme/colors.dart'; +import 'package:moon_design/src/theme/icons/icon_theme.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'; @@ -392,7 +393,10 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker widget.backgroundColor ?? context.moonTheme?.tooltipTheme.colors.backgroundColor ?? MoonColors.light.gohan; final Color effectiveTextColor = - context.moonTypography?.colors.bodyPrimary ?? MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.tooltipTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + + final Color effectiveIconColor = + context.moonTheme?.tooltipTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; final double effectiveArrowBaseWidth = widget.arrowBaseWidth ?? context.moonTheme?.tooltipTheme.properties.arrowBaseWidth ?? 16; @@ -412,8 +416,7 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker widget.tooltipShadows ?? context.moonTheme?.tooltipTheme.shadows.tooltipShadows ?? MoonShadows.light.sm; final TextStyle effectiveTextStyle = - context.moonTheme?.tooltipTheme.properties.textStyle.copyWith(color: effectiveTextColor) ?? - MoonTextStyles.body.text12.copyWith(color: effectiveTextColor); + context.moonTheme?.tooltipTheme.properties.textStyle ?? MoonTextStyles.body.text12; final overlayRenderBox = Overlay.of(context).context.findRenderObject()! as RenderBox; @@ -492,27 +495,30 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker child: FadeTransition( opacity: _curvedAnimation!, child: DefaultTextStyle( - style: effectiveTextStyle, - child: Container( - key: _tooltipKey, - constraints: BoxConstraints(maxWidth: tooltipPositionParameters.tooltipMaxWidth), - padding: resolvedContentPadding, - decoration: ShapeDecorationWithPremultipliedAlpha( - color: effectiveBackgroundColor, - shadows: effectiveTooltipShadows, - shape: TooltipShape( - arrowBaseWidth: effectiveArrowBaseWidth, - arrowLength: effectiveArrowLength, - arrowOffset: widget.arrowOffsetValue, - arrowTipDistance: effectiveArrowTipDistance, - borderColor: widget.borderColor, - borderRadius: resolvedBorderRadius, - borderWidth: widget.borderWidth, - childWidth: targetRenderBox.size.width, - tooltipPosition: tooltipPosition, + style: effectiveTextStyle.copyWith(color: effectiveTextColor), + child: IconTheme( + data: IconThemeData(color: effectiveIconColor), + child: Container( + key: _tooltipKey, + constraints: BoxConstraints(maxWidth: tooltipPositionParameters.tooltipMaxWidth), + padding: resolvedContentPadding, + decoration: ShapeDecorationWithPremultipliedAlpha( + color: effectiveBackgroundColor, + shadows: effectiveTooltipShadows, + shape: TooltipShape( + arrowBaseWidth: effectiveArrowBaseWidth, + arrowLength: effectiveArrowLength, + arrowOffset: widget.arrowOffsetValue, + arrowTipDistance: effectiveArrowTipDistance, + borderColor: widget.borderColor, + borderRadius: resolvedBorderRadius, + borderWidth: widget.borderWidth, + childWidth: targetRenderBox.size.width, + tooltipPosition: tooltipPosition, + ), ), + child: widget.content, ), - child: widget.content, ), ), ),