From 2c1cd279616ae3ef168f2cb402dcc2d97261c639 Mon Sep 17 00:00:00 2001 From: Harry Sild <46851868+Kypsis@users.noreply.github.com> Date: Tue, 18 Jul 2023 14:09:44 +0300 Subject: [PATCH] fix: [MDS-596] Refactor theming for extensibility (#210) --- README.md | 47 ++- example/lib/main.dart | 6 +- .../src/storybook/common/widgets/version.dart | 5 +- .../lib/src/storybook/stories/accordion.dart | 18 +- .../src/storybook/stories/bottom_sheet.dart | 2 +- example/lib/src/storybook/stories/button.dart | 8 +- .../lib/src/storybook/stories/carousel.dart | 2 +- example/lib/src/storybook/stories/chip.dart | 2 +- .../lib/src/storybook/stories/tooltip.dart | 2 +- example/lib/src/storybook/storybook.dart | 6 +- lib/moon_design.dart | 20 +- ...item_colors.dart => accordion_colors.dart} | 50 +--- .../accordion/accordion_item_shadows.dart | 46 --- .../theme/accordion/accordion_item_sizes.dart | 71 ----- ...perties.dart => accordion_properties.dart} | 27 +- .../theme/accordion/accordion_shadows.dart | 36 +++ ...es.dart => accordion_size_properties.dart} | 59 +--- lib/src/theme/accordion/accordion_sizes.dart | 108 +++++++ lib/src/theme/accordion/accordion_theme.dart | 111 +++++--- lib/src/theme/alert/alert_colors.dart | 17 -- lib/src/theme/alert/alert_properties.dart | 16 -- lib/src/theme/alert/alert_theme.dart | 43 ++- lib/src/theme/authcode/authcode_colors.dart | 24 -- .../theme/authcode/authcode_properties.dart | 18 -- lib/src/theme/authcode/authcode_theme.dart | 49 +++- lib/src/theme/avatar/avatar_colors.dart | 17 -- .../theme/avatar/avatar_size_properties.dart | 55 ---- lib/src/theme/avatar/avatar_sizes.dart | 79 +++-- lib/src/theme/avatar/avatar_theme.dart | 32 ++- .../bottom_sheet/bottom_sheet_colors.dart | 17 -- .../bottom_sheet/bottom_sheet_properties.dart | 10 - .../bottom_sheet_size_properties.dart | 16 -- .../bottom_sheet/bottom_sheet_sizes.dart | 29 +- .../bottom_sheet/bottom_sheet_theme.dart | 43 +-- lib/src/theme/button/button_colors.dart | 22 -- .../theme/button/button_size_properties.dart | 49 ---- lib/src/theme/button/button_sizes.dart | 73 ++++- lib/src/theme/button/button_theme.dart | 35 ++- lib/src/theme/carousel/carousel_colors.dart | 13 +- .../theme/carousel/carousel_properties.dart | 11 - lib/src/theme/carousel/carousel_theme.dart | 37 ++- lib/src/theme/checkbox/checkbox_colors.dart | 18 -- .../theme/checkbox/checkbox_properties.dart | 8 - lib/src/theme/checkbox/checkbox_theme.dart | 37 ++- lib/src/theme/chip/chip_colors.dart | 16 -- lib/src/theme/chip/chip_size_properties.dart | 22 -- lib/src/theme/chip/chip_sizes.dart | 38 ++- lib/src/theme/chip/chip_theme.dart | 32 ++- .../dot_indicator/dot_indicator_colors.dart | 11 - .../dot_indicator_properties.dart | 9 - .../dot_indicator/dot_indicator_theme.dart | 36 ++- lib/src/theme/drawer/drawer_colors.dart | 17 -- lib/src/theme/drawer/drawer_properties.dart | 8 - lib/src/theme/drawer/drawer_shadows.dart | 10 - lib/src/theme/drawer/drawer_theme.dart | 42 +-- lib/src/theme/effects/controls_effects.dart | 14 - lib/src/theme/effects/effects.dart | 81 ------ lib/src/theme/effects/effects_theme.dart | 101 +++++++ lib/src/theme/effects/focus_effects.dart | 14 - lib/src/theme/effects/hover_effects.dart | 16 +- lib/src/theme/icons/icon_colors.dart | 49 ---- lib/src/theme/icons/icon_theme.dart | 48 ---- .../circular_loader_colors.dart | 11 - .../circular_loader_size_properties.dart | 27 -- .../circular_loader_sizes.dart | 53 +++- .../circular_loader_theme.dart | 29 +- .../linear_loader/linear_loader_colors.dart | 11 - .../linear_loader_size_properties.dart | 28 -- .../linear_loader/linear_loader_sizes.dart | 53 +++- .../linear_loader/linear_loader_theme.dart | 30 +- lib/src/theme/modal/modal_colors.dart | 17 -- lib/src/theme/modal/modal_properties.dart | 10 - lib/src/theme/modal/modal_theme.dart | 38 ++- lib/src/theme/popover/popover_colors.dart | 15 - lib/src/theme/popover/popover_properties.dart | 13 - lib/src/theme/popover/popover_shadows.dart | 10 - lib/src/theme/popover/popover_theme.dart | 44 +-- .../circular_progress_colors.dart | 11 - .../circular_progress_size_properties.dart | 27 -- .../circular_progress_sizes.dart | 53 +++- .../circular_progress_theme.dart | 30 +- .../linear_progress_colors.dart | 11 - .../linear_progress_size_properties.dart | 28 -- .../linear_progress_sizes.dart | 53 +++- .../linear_progress_theme.dart | 30 +- lib/src/theme/radio/radio_colors.dart | 14 - lib/src/theme/radio/radio_properties.dart | 6 - lib/src/theme/radio/radio_theme.dart | 34 ++- .../segmented_control_colors.dart | 16 -- .../segmented_control_properties.dart | 10 - .../segmented_control_size_properties.dart | 22 -- .../segmented_control_sizes.dart | 37 ++- .../segmented_control_theme.dart | 44 +-- lib/src/theme/switch/switch_colors.dart | 25 -- lib/src/theme/switch/switch_properties.dart | 5 - lib/src/theme/switch/switch_shadows.dart | 10 - .../theme/switch/switch_size_properties.dart | 30 -- lib/src/theme/switch/switch_sizes.dart | 49 +++- lib/src/theme/switch/switch_theme.dart | 53 ++-- lib/src/theme/tab_bar/tab_bar_colors.dart | 18 -- lib/src/theme/tab_bar/tab_bar_properties.dart | 8 - .../tab_bar/tab_bar_size_properties.dart | 24 -- lib/src/theme/tab_bar/tab_bar_sizes.dart | 38 ++- lib/src/theme/tab_bar/tab_bar_theme.dart | 43 +-- lib/src/theme/tag/tag_colors.dart | 15 - lib/src/theme/tag/tag_size_properties.dart | 24 -- lib/src/theme/tag/tag_sizes.dart | 39 ++- lib/src/theme/tag/tag_theme.dart | 31 +- lib/src/theme/text_area/text_area_colors.dart | 19 -- .../theme/text_area/text_area_properties.dart | 14 - lib/src/theme/text_area/text_area_theme.dart | 43 ++- .../theme/text_input/text_input_colors.dart | 21 -- .../text_input/text_input_properties.dart | 10 - .../text_input_size_properties.dart | 52 ---- .../theme/text_input/text_input_sizes.dart | 73 ++++- .../theme/text_input/text_input_theme.dart | 46 +-- lib/src/theme/theme.dart | 269 ++++++------------ lib/src/theme/toast/toast_colors.dart | 21 -- lib/src/theme/toast/toast_properties.dart | 14 - lib/src/theme/toast/toast_shadows.dart | 10 - lib/src/theme/toast/toast_theme.dart | 48 ++-- lib/src/theme/{ => tokens}/borders.dart | 0 lib/src/theme/{ => tokens}/colors.dart | 46 ++- .../{opacity.dart => tokens/opacities.dart} | 18 +- lib/src/theme/{ => tokens}/shadows.dart | 0 lib/src/theme/{ => tokens}/sizes.dart | 0 lib/src/theme/tokens/tokens.dart | 123 ++++++++ lib/src/theme/tokens/transitions.dart | 51 ++++ .../{ => tokens}/typography/text_styles.dart | 79 +++++ .../{ => tokens}/typography/typography.dart | 31 +- lib/src/theme/tooltip/tooltip_colors.dart | 15 - lib/src/theme/tooltip/tooltip_properties.dart | 15 - lib/src/theme/tooltip/tooltip_shadows.dart | 10 - lib/src/theme/tooltip/tooltip_theme.dart | 46 +-- lib/src/theme/typography/text_colors.dart | 79 ----- .../{accordion_item.dart => accordion.dart} | 147 +++++----- lib/src/widgets/alert/alert.dart | 28 +- lib/src/widgets/authcode/authcode.dart | 37 +-- lib/src/widgets/avatar/avatar.dart | 26 +- .../widgets/bottom_sheet/bottom_sheet.dart | 14 +- .../bottom_sheet/modal_bottom_sheet.dart | 10 +- lib/src/widgets/buttons/button.dart | 29 +- lib/src/widgets/buttons/filled_button.dart | 6 +- lib/src/widgets/buttons/text_button.dart | 8 +- lib/src/widgets/carousel/carousel.dart | 26 +- lib/src/widgets/checkbox/checkbox.dart | 41 ++- lib/src/widgets/chips/chip.dart | 27 +- lib/src/widgets/common/base_control.dart | 37 +-- .../widgets/dot_indicator/dot_indicator.dart | 9 +- lib/src/widgets/drawer/drawer.dart | 16 +- lib/src/widgets/loaders/circular_loader.dart | 17 +- lib/src/widgets/loaders/linear_loader.dart | 16 +- lib/src/widgets/modal/modal.dart | 24 +- lib/src/widgets/popover/popover.dart | 24 +- .../widgets/progress/circular_progress.dart | 22 +- lib/src/widgets/progress/linear_progress.dart | 22 +- lib/src/widgets/radio/radio.dart | 39 ++- .../segmented_control/segmented_control.dart | 29 +- lib/src/widgets/switch/switch.dart | 56 ++-- lib/src/widgets/tab_bar/tab_bar.dart | 27 +- lib/src/widgets/tag/tag.dart | 18 +- lib/src/widgets/text_area/text_area.dart | 36 ++- lib/src/widgets/text_input/text_input.dart | 39 +-- lib/src/widgets/toast/toast.dart | 30 +- lib/src/widgets/tooltip/tooltip.dart | 24 +- 165 files changed, 2406 insertions(+), 2816 deletions(-) rename lib/src/theme/accordion/{accordion_item_colors.dart => accordion_colors.dart} (70%) delete mode 100644 lib/src/theme/accordion/accordion_item_shadows.dart delete mode 100644 lib/src/theme/accordion/accordion_item_sizes.dart rename lib/src/theme/accordion/{accordion_item_properties.dart => accordion_properties.dart} (54%) create mode 100644 lib/src/theme/accordion/accordion_shadows.dart rename lib/src/theme/accordion/{accordion_item_size_properties.dart => accordion_size_properties.dart} (51%) create mode 100644 lib/src/theme/accordion/accordion_sizes.dart delete mode 100644 lib/src/theme/effects/effects.dart create mode 100644 lib/src/theme/effects/effects_theme.dart delete mode 100644 lib/src/theme/icons/icon_colors.dart delete mode 100644 lib/src/theme/icons/icon_theme.dart rename lib/src/theme/{ => tokens}/borders.dart (100%) rename lib/src/theme/{ => tokens}/colors.dart (88%) rename lib/src/theme/{opacity.dart => tokens/opacities.dart} (57%) rename lib/src/theme/{ => tokens}/shadows.dart (100%) rename lib/src/theme/{ => tokens}/sizes.dart (100%) create mode 100644 lib/src/theme/tokens/tokens.dart create mode 100644 lib/src/theme/tokens/transitions.dart rename lib/src/theme/{ => tokens}/typography/text_styles.dart (77%) rename lib/src/theme/{ => tokens}/typography/typography.dart (64%) delete mode 100644 lib/src/theme/typography/text_colors.dart rename lib/src/widgets/accordion/{accordion_item.dart => accordion.dart} (80%) diff --git a/README.md b/README.md index 3d78bfb8..f4725157 100644 --- a/README.md +++ b/README.md @@ -15,4 +15,49 @@ to write commit messages._ ## Resources -- 📖 [Documentation](https://flutter.moon.io) +- 📱 [Playground](https://flutter.moon.io) + + +## Applying theming and overrides + +- Declare tokens variable and optionally override values: + +```dart +final lightTokens = MoonTokens.light.copyWith( + colors: MoonColors.light.copyWith( + piccolo: Colors.blue, + bodyTextPrimary: Colors.amber, + ), + typography: MoonTypography.typography.copyWith( + heading: MoonTypography.typography.heading.apply(fontFamily: "KumbhSans"), + ), +); + +final lightTheme = ThemeData.light().copyWith(extensions: >[MoonTheme(tokens: lightTokens)]); +``` + +- Or if needed override widget theming: + +```dart +final lightTheme = ThemeData.light().copyWith( + extensions: >[ + MoonTheme(tokens: lightTokens).copyWith( + accordionTheme: MoonAccordionTheme(tokens: lightTokens).copyWith( + colors: MoonAccordionTheme(tokens: lightTokens).colors.copyWith( + backgroundColor: Colors.green, + ), + ), + ), + ], +); +``` + +- Apply the declared theme: + +```dart +return MaterialApp( + title: 'MDS example', + theme: lightTheme, + home: const HomePage(), + ); +``` \ No newline at end of file diff --git a/example/lib/main.dart b/example/lib/main.dart index 4f8683dc..d682868b 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -48,8 +48,10 @@ class _HomePageState extends State { return _isInStorybookMode ? const StorybookPage() : MaterialApp( - theme: ThemeData.light().copyWith(extensions: >[MoonTheme.light]), - darkTheme: ThemeData.dark().copyWith(extensions: >[MoonTheme.dark]), + theme: + ThemeData.light().copyWith(extensions: >[MoonTheme(tokens: MoonTokens.light)]), + darkTheme: + ThemeData.dark().copyWith(extensions: >[MoonTheme(tokens: MoonTokens.dark)]), home: Scaffold( body: Center( child: Column( diff --git a/example/lib/src/storybook/common/widgets/version.dart b/example/lib/src/storybook/common/widgets/version.dart index 9a50438c..67b0666c 100644 --- a/example/lib/src/storybook/common/widgets/version.dart +++ b/example/lib/src/storybook/common/widgets/version.dart @@ -1,7 +1,6 @@ import 'package:example/src/storybook/storybook.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; - import 'package:moon_design/moon_design.dart'; import 'package:package_info_plus/package_info_plus.dart'; @@ -41,11 +40,11 @@ class _MoonVersionWidgetState extends State { const SizedBox(width: 8.0), Text( "Moon Design", - style: MoonTextStyles.heading.text16, + style: MoonTypography.typography.heading.text16, ), ], const SizedBox(width: 6.0), - Text("v$_version", style: MoonTextStyles.heading.text16), + Text("v$_version", style: MoonTypography.typography.heading.text16), ], ), ), diff --git a/example/lib/src/storybook/stories/accordion.dart b/example/lib/src/storybook/stories/accordion.dart index 880880dd..8fbd9b5b 100644 --- a/example/lib/src/storybook/stories/accordion.dart +++ b/example/lib/src/storybook/stories/accordion.dart @@ -17,12 +17,12 @@ class AccordionStory extends Story { label: "accordionSize", description: "Size variants for MoonAccordion.", enabled: false, - initial: MoonAccordionItemSize.md, + initial: MoonAccordionSize.md, options: const [ - Option(label: "sm", value: MoonAccordionItemSize.sm), - Option(label: "md", value: MoonAccordionItemSize.md), - Option(label: "lg", value: MoonAccordionItemSize.lg), - Option(label: "xl", value: MoonAccordionItemSize.xl) + Option(label: "sm", value: MoonAccordionSize.sm), + Option(label: "md", value: MoonAccordionSize.md), + Option(label: "lg", value: MoonAccordionSize.lg), + Option(label: "xl", value: MoonAccordionSize.xl) ], ); @@ -180,7 +180,7 @@ class AccordionStory extends Story { const SizedBox(height: 64), const TextDivider(text: "Grouped MoonAccordion"), const SizedBox(height: 32), - MoonAccordionItem( + MoonAccordion( identityValue: AccordionItems.first, groupIdentityValue: currentlyOpenAccordionItem, accordionSize: accordionSizesKnob, @@ -211,7 +211,7 @@ class AccordionStory extends Story { ], ), const SizedBox(height: 8), - MoonAccordionItem( + MoonAccordion( identityValue: AccordionItems.second, groupIdentityValue: currentlyOpenAccordionItem, initiallyExpanded: true, @@ -245,7 +245,7 @@ class AccordionStory extends Story { const SizedBox(height: 40), const TextDivider(text: "Ungrouped MoonAccordion with content outside"), const SizedBox(height: 32), - MoonAccordionItem( + MoonAccordion( accordionSize: accordionSizesKnob, initiallyExpanded: true, hasContentOutside: true, @@ -272,7 +272,7 @@ class AccordionStory extends Story { ], ), const SizedBox(height: 8), - MoonAccordionItem( + MoonAccordion( accordionSize: accordionSizesKnob, hasContentOutside: true, leadingColor: leadingColor, diff --git a/example/lib/src/storybook/stories/bottom_sheet.dart b/example/lib/src/storybook/stories/bottom_sheet.dart index 5ae00f48..feb19278 100644 --- a/example/lib/src/storybook/stories/bottom_sheet.dart +++ b/example/lib/src/storybook/stories/bottom_sheet.dart @@ -57,7 +57,7 @@ class BottomSheetStory extends Story { height: 4, width: 41, decoration: ShapeDecoration( - color: context.moonTheme!.colors.beerus, + color: context.moonColors!.beerus, shape: const StadiumBorder(), ), ), diff --git a/example/lib/src/storybook/stories/button.dart b/example/lib/src/storybook/stories/button.dart index 85766ca5..dfbb32dc 100644 --- a/example/lib/src/storybook/stories/button.dart +++ b/example/lib/src/storybook/stories/button.dart @@ -245,7 +245,7 @@ class ButtonStory extends Story { padding: const EdgeInsets.all(4), child: CircularProgressIndicator( strokeWidth: 2, - color: context.moonTheme!.colors.popo, + color: context.moonColors!.popo, ), ), ), @@ -268,8 +268,8 @@ class ButtonStory extends Story { begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ - context.moonTheme!.colors.krillin100, - context.moonTheme!.colors.dodoria100, + context.moonColors!.krillin100, + context.moonColors!.dodoria100, ], ), shape: const StarBorder(pointRounding: 0.5, valleyRounding: 0.5), @@ -278,7 +278,7 @@ class ButtonStory extends Story { width: 32, height: 32, child: CircleAvatar( - backgroundColor: context.moonTheme!.colors.frieza60, + backgroundColor: context.moonColors!.frieza60, child: const MoonIcon( MoonIcons.rocket_24, size: 24, diff --git a/example/lib/src/storybook/stories/carousel.dart b/example/lib/src/storybook/stories/carousel.dart index 25077644..c4398617 100644 --- a/example/lib/src/storybook/stories/carousel.dart +++ b/example/lib/src/storybook/stories/carousel.dart @@ -75,7 +75,7 @@ class CarouselStory extends Story { loop: isLoopedKnob, itemBuilder: (context, itemIndex, realIndex) => Container( decoration: ShapeDecoration( - color: context.moonTheme?.colors.gohan, + color: context.moonColors!.gohan, shape: MoonSquircleBorder( borderRadius: BorderRadius.circular(12).squircleBorderRadius(context), ), diff --git a/example/lib/src/storybook/stories/chip.dart b/example/lib/src/storybook/stories/chip.dart index 130efc49..3770ddcf 100644 --- a/example/lib/src/storybook/stories/chip.dart +++ b/example/lib/src/storybook/stories/chip.dart @@ -163,7 +163,7 @@ class ChipStory extends Story { activeColor: context.moonColors!.dodoria100, backgroundColor: context.moonColors!.krillin100, activeBackgroundColor: context.moonColors!.chiChi10, - textColor: context.moonTypography!.colors.controlPrimary, + textColor: context.moonColors!.goten, borderWidth: 2, showBorder: showBorderKnob, chipSize: chipSizesKnob, diff --git a/example/lib/src/storybook/stories/tooltip.dart b/example/lib/src/storybook/stories/tooltip.dart index 53303ab1..dcb5337a 100644 --- a/example/lib/src/storybook/stories/tooltip.dart +++ b/example/lib/src/storybook/stories/tooltip.dart @@ -173,7 +173,7 @@ class TooltipStory extends Story { borderRadius: BorderRadius.circular(20), backgroundColor: context.moonColors!.hit, leading: const MoonIcon(MoonIcons.frame_24), - textColor: context.moonTypography!.colors.controlPrimary, + textColor: context.moonColors!.goten, label: const Text("MoonChip"), ), const SizedBox(height: 64), diff --git a/example/lib/src/storybook/storybook.dart b/example/lib/src/storybook/storybook.dart index 9f3e10a7..9f47a7a2 100644 --- a/example/lib/src/storybook/storybook.dart +++ b/example/lib/src/storybook/storybook.dart @@ -57,8 +57,10 @@ class StorybookPage extends StatelessWidget { brandingWidget: const MoonVersionWidget(), wrapperBuilder: (context, child) => MaterialApp( title: "Moon Design for Flutter", - theme: ThemeData.light().copyWith(extensions: >[MoonTheme.light]), - darkTheme: ThemeData.dark().copyWith(extensions: >[MoonTheme.dark]), + theme: + ThemeData.light().copyWith(extensions: >[MoonTheme(tokens: MoonTokens.light)]), + darkTheme: + ThemeData.dark().copyWith(extensions: >[MoonTheme(tokens: MoonTokens.dark)]), home: Directionality( textDirection: Directionality.of(context), child: Focus( diff --git a/lib/moon_design.dart b/lib/moon_design.dart index e51bd0b7..19f4b23a 100644 --- a/lib/moon_design.dart +++ b/lib/moon_design.dart @@ -5,37 +5,35 @@ export 'package:moon_design/src/theme/accordion/accordion_theme.dart'; export 'package:moon_design/src/theme/alert/alert_theme.dart'; export 'package:moon_design/src/theme/authcode/authcode_theme.dart'; export 'package:moon_design/src/theme/avatar/avatar_theme.dart'; -export 'package:moon_design/src/theme/borders.dart'; export 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_theme.dart'; export 'package:moon_design/src/theme/button/button_theme.dart'; export 'package:moon_design/src/theme/carousel/carousel_theme.dart'; 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/dot_indicator/dot_indicator_theme.dart'; export 'package:moon_design/src/theme/drawer/drawer_theme.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/effects/effects_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'; -export 'package:moon_design/src/theme/opacity.dart'; export 'package:moon_design/src/theme/popover/popover_theme.dart'; export 'package:moon_design/src/theme/progress/circular_progress/circular_progress_theme.dart'; export 'package:moon_design/src/theme/progress/linear_progress/linear_progress_theme.dart'; export 'package:moon_design/src/theme/radio/radio_theme.dart'; export 'package:moon_design/src/theme/segmented_control/segmented_control_theme.dart'; -export 'package:moon_design/src/theme/shadows.dart'; -export 'package:moon_design/src/theme/sizes.dart'; export 'package:moon_design/src/theme/switch/switch_theme.dart'; export 'package:moon_design/src/theme/text_area/text_area_theme.dart'; export 'package:moon_design/src/theme/text_input/text_input_theme.dart'; export 'package:moon_design/src/theme/theme.dart'; export 'package:moon_design/src/theme/toast/toast_theme.dart'; +export 'package:moon_design/src/theme/tokens/borders.dart'; +export 'package:moon_design/src/theme/tokens/colors.dart'; +export 'package:moon_design/src/theme/tokens/opacities.dart'; +export 'package:moon_design/src/theme/tokens/shadows.dart'; +export 'package:moon_design/src/theme/tokens/sizes.dart'; +export 'package:moon_design/src/theme/tokens/tokens.dart'; +export 'package:moon_design/src/theme/tokens/typography/typography.dart'; export 'package:moon_design/src/theme/tooltip/tooltip_theme.dart'; -export 'package:moon_design/src/theme/typography/text_colors.dart'; -export 'package:moon_design/src/theme/typography/text_styles.dart'; -export 'package:moon_design/src/theme/typography/typography.dart'; export 'package:moon_design/src/utils/color_premul_lerp.dart'; export 'package:moon_design/src/utils/color_tween_premul.dart'; @@ -46,7 +44,7 @@ export 'package:moon_design/src/utils/squircle/squircle_border.dart'; export 'package:moon_design/src/utils/squircle/squircle_border_radius.dart'; export 'package:moon_design/src/utils/squircle/squircle_radius.dart'; -export 'package:moon_design/src/widgets/accordion/accordion_item.dart'; +export 'package:moon_design/src/widgets/accordion/accordion.dart'; export 'package:moon_design/src/widgets/alert/alert.dart'; export 'package:moon_design/src/widgets/alert/filled_alert.dart'; export 'package:moon_design/src/widgets/alert/outlined_alert.dart'; diff --git a/lib/src/theme/accordion/accordion_item_colors.dart b/lib/src/theme/accordion/accordion_colors.dart similarity index 70% rename from lib/src/theme/accordion/accordion_item_colors.dart rename to lib/src/theme/accordion/accordion_colors.dart index c3a5d8a7..5bf74327 100644 --- a/lib/src/theme/accordion/accordion_item_colors.dart +++ b/lib/src/theme/accordion/accordion_colors.dart @@ -1,44 +1,10 @@ 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 -class MoonAccordionItemColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonAccordionItemColors( - leadingColor: MoonTypography.light.colors.bodyPrimary, - expandedLeadingColor: MoonTypography.light.colors.bodyPrimary, - titleColor: MoonTypography.light.colors.bodyPrimary, - expandedTitleColor: MoonTypography.light.colors.bodyPrimary, - trailingColor: MoonTypography.light.colors.bodyPrimary, - expandedTrailingColor: MoonTypography.light.colors.bodyPrimary, - contentColor: MoonTypography.light.colors.bodyPrimary, - trailingIconColor: MoonTypography.light.colors.bodySecondary, - expandedTrailingIconColor: MoonTypography.light.colors.bodyPrimary, - backgroundColor: MoonColors.light.gohan, - expandedBackgroundColor: MoonColors.light.gohan, - borderColor: MoonColors.light.beerus, - dividerColor: MoonColors.light.beerus, - ); - - static final dark = MoonAccordionItemColors( - leadingColor: MoonTypography.dark.colors.bodyPrimary, - expandedLeadingColor: MoonTypography.dark.colors.bodyPrimary, - titleColor: MoonTypography.dark.colors.bodyPrimary, - expandedTitleColor: MoonTypography.dark.colors.bodyPrimary, - trailingColor: MoonTypography.dark.colors.bodyPrimary, - expandedTrailingColor: MoonTypography.dark.colors.bodyPrimary, - contentColor: MoonTypography.dark.colors.bodyPrimary, - trailingIconColor: MoonTypography.dark.colors.bodySecondary, - expandedTrailingIconColor: MoonTypography.dark.colors.bodyPrimary, - backgroundColor: MoonColors.dark.gohan, - expandedBackgroundColor: MoonColors.dark.gohan, - borderColor: MoonColors.dark.beerus, - dividerColor: MoonColors.dark.beerus, - ); - +class MoonAccordionColors extends ThemeExtension with DiagnosticableTreeMixin { /// Collapsed accordion item leading slot widget's text and icon color. final Color leadingColor; @@ -78,7 +44,7 @@ class MoonAccordionItemColors extends ThemeExtension wi /// Accordion item divider color. final Color dividerColor; - const MoonAccordionItemColors({ + const MoonAccordionColors({ required this.leadingColor, required this.expandedLeadingColor, required this.titleColor, @@ -95,7 +61,7 @@ class MoonAccordionItemColors extends ThemeExtension wi }); @override - MoonAccordionItemColors copyWith({ + MoonAccordionColors copyWith({ Color? leadingColor, Color? expandedLeadingColor, Color? titleColor, @@ -110,7 +76,7 @@ class MoonAccordionItemColors extends ThemeExtension wi Color? borderColor, Color? dividerColor, }) { - return MoonAccordionItemColors( + return MoonAccordionColors( leadingColor: leadingColor ?? this.leadingColor, expandedLeadingColor: expandedLeadingColor ?? this.expandedLeadingColor, titleColor: titleColor ?? this.titleColor, @@ -128,10 +94,10 @@ class MoonAccordionItemColors extends ThemeExtension wi } @override - MoonAccordionItemColors lerp(ThemeExtension? other, double t) { - if (other is! MoonAccordionItemColors) return this; + MoonAccordionColors lerp(ThemeExtension? other, double t) { + if (other is! MoonAccordionColors) return this; - return MoonAccordionItemColors( + return MoonAccordionColors( leadingColor: colorPremulLerp(leadingColor, other.leadingColor, t)!, expandedLeadingColor: colorPremulLerp(expandedLeadingColor, other.expandedLeadingColor, t)!, titleColor: colorPremulLerp(titleColor, other.titleColor, t)!, @@ -152,7 +118,7 @@ class MoonAccordionItemColors extends ThemeExtension wi void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties - ..add(DiagnosticsProperty("type", "MoonAccordionItemColors")) + ..add(DiagnosticsProperty("type", "MoonAccordionColors")) ..add(ColorProperty("leadingColor", leadingColor)) ..add(ColorProperty("expandedLeadingColor", expandedLeadingColor)) ..add(ColorProperty("titleColor", titleColor)) diff --git a/lib/src/theme/accordion/accordion_item_shadows.dart b/lib/src/theme/accordion/accordion_item_shadows.dart deleted file mode 100644 index 39418bd7..00000000 --- a/lib/src/theme/accordion/accordion_item_shadows.dart +++ /dev/null @@ -1,46 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; - -import 'package:moon_design/src/theme/shadows.dart'; - -@immutable -class MoonAccordionItemShadows extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonAccordionItemShadows( - shadows: MoonShadows.light.sm, - ); - - static final dark = MoonAccordionItemShadows( - shadows: MoonShadows.dark.sm, - ); - - /// Accordion item shadows. - final List shadows; - - const MoonAccordionItemShadows({ - required this.shadows, - }); - - @override - MoonAccordionItemShadows copyWith({List? shadows}) { - return MoonAccordionItemShadows( - shadows: shadows ?? this.shadows, - ); - } - - @override - MoonAccordionItemShadows lerp(ThemeExtension? other, double t) { - if (other is! MoonAccordionItemShadows) return this; - - return MoonAccordionItemShadows( - shadows: BoxShadow.lerpList(shadows, other.shadows, t)!, - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty("type", "MoonAccordionItemShadows")) - ..add(DiagnosticsProperty>("shadows", shadows)); - } -} diff --git a/lib/src/theme/accordion/accordion_item_sizes.dart b/lib/src/theme/accordion/accordion_item_sizes.dart deleted file mode 100644 index 6dffcb78..00000000 --- a/lib/src/theme/accordion/accordion_item_sizes.dart +++ /dev/null @@ -1,71 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; - -import 'package:moon_design/src/theme/accordion/accordion_item_size_properties.dart'; - -@immutable -class MoonAccordionItemSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonAccordionItemSizes( - sm: MoonAccordionItemSizeProperties.sm, - md: MoonAccordionItemSizeProperties.md, - lg: MoonAccordionItemSizeProperties.lg, - xl: MoonAccordionItemSizeProperties.xl, - ); - - /// Small accordion item properties. - final MoonAccordionItemSizeProperties sm; - - /// Medium accordion item properties. - final MoonAccordionItemSizeProperties md; - - /// Large accordion item properties. - final MoonAccordionItemSizeProperties lg; - - /// Extra large accordion item properties. - final MoonAccordionItemSizeProperties xl; - - const MoonAccordionItemSizes({ - required this.sm, - required this.md, - required this.lg, - required this.xl, - }); - - @override - MoonAccordionItemSizes copyWith({ - MoonAccordionItemSizeProperties? sm, - MoonAccordionItemSizeProperties? md, - MoonAccordionItemSizeProperties? lg, - MoonAccordionItemSizeProperties? xl, - }) { - return MoonAccordionItemSizes( - sm: sm ?? this.sm, - md: md ?? this.md, - lg: lg ?? this.lg, - xl: xl ?? this.xl, - ); - } - - @override - MoonAccordionItemSizes lerp(ThemeExtension? other, double t) { - if (other is! MoonAccordionItemSizes) return this; - - return MoonAccordionItemSizes( - sm: sm.lerp(other.sm, t), - md: md.lerp(other.md, t), - lg: lg.lerp(other.lg, t), - xl: xl.lerp(other.xl, t), - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty("type", "MoonAccordionItemSizes")) - ..add(DiagnosticsProperty("sm", sm)) - ..add(DiagnosticsProperty("md", md)) - ..add(DiagnosticsProperty("lg", lg)) - ..add(DiagnosticsProperty("xl", xl)); - } -} diff --git a/lib/src/theme/accordion/accordion_item_properties.dart b/lib/src/theme/accordion/accordion_properties.dart similarity index 54% rename from lib/src/theme/accordion/accordion_item_properties.dart rename to lib/src/theme/accordion/accordion_properties.dart index 8000c8ac..af7913f9 100644 --- a/lib/src/theme/accordion/accordion_item_properties.dart +++ b/lib/src/theme/accordion/accordion_properties.dart @@ -2,41 +2,34 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable -class MoonAccordionItemProperties extends ThemeExtension with DiagnosticableTreeMixin { - static const properties = MoonAccordionItemProperties( - transitionDuration: Duration(milliseconds: 200), - transitionCurve: Curves.easeInOutCubic, - ); - - /// Accordion item border radius. - - /// Accordion item transition duration. +class MoonAccordionProperties extends ThemeExtension with DiagnosticableTreeMixin { + /// Accordion transition duration. final Duration transitionDuration; - /// Accordion item transition curve. + /// Accordion transition curve. final Curve transitionCurve; - const MoonAccordionItemProperties({ + const MoonAccordionProperties({ required this.transitionDuration, required this.transitionCurve, }); @override - MoonAccordionItemProperties copyWith({ + MoonAccordionProperties copyWith({ Duration? transitionDuration, Curve? transitionCurve, }) { - return MoonAccordionItemProperties( + return MoonAccordionProperties( transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, ); } @override - MoonAccordionItemProperties lerp(ThemeExtension? other, double t) { - if (other is! MoonAccordionItemProperties) return this; + MoonAccordionProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonAccordionProperties) return this; - return MoonAccordionItemProperties( + return MoonAccordionProperties( transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, ); @@ -46,7 +39,7 @@ class MoonAccordionItemProperties extends ThemeExtension("transitionDuration", transitionDuration)) ..add(DiagnosticsProperty("transitionCurve", transitionCurve)); } diff --git a/lib/src/theme/accordion/accordion_shadows.dart b/lib/src/theme/accordion/accordion_shadows.dart new file mode 100644 index 00000000..e6a21b90 --- /dev/null +++ b/lib/src/theme/accordion/accordion_shadows.dart @@ -0,0 +1,36 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +@immutable +class MoonAccordionShadows extends ThemeExtension with DiagnosticableTreeMixin { + /// Accordion shadows. + final List shadows; + + const MoonAccordionShadows({ + required this.shadows, + }); + + @override + MoonAccordionShadows copyWith({List? shadows}) { + return MoonAccordionShadows( + shadows: shadows ?? this.shadows, + ); + } + + @override + MoonAccordionShadows lerp(ThemeExtension? other, double t) { + if (other is! MoonAccordionShadows) return this; + + return MoonAccordionShadows( + shadows: BoxShadow.lerpList(shadows, other.shadows, t)!, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonAccordionShadows")) + ..add(DiagnosticsProperty>("shadows", shadows)); + } +} diff --git a/lib/src/theme/accordion/accordion_item_size_properties.dart b/lib/src/theme/accordion/accordion_size_properties.dart similarity index 51% rename from lib/src/theme/accordion/accordion_item_size_properties.dart rename to lib/src/theme/accordion/accordion_size_properties.dart index e7f1ca6a..1fb7f5ff 100644 --- a/lib/src/theme/accordion/accordion_item_size_properties.dart +++ b/lib/src/theme/accordion/accordion_size_properties.dart @@ -3,50 +3,9 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable -class MoonAccordionItemSizeProperties extends ThemeExtension - with DiagnosticableTreeMixin { - static final sm = MoonAccordionItemSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - headerHeight: MoonSizes.sizes.sm, - iconSizeValue: MoonSizes.sizes.x2s, - headerPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), - headerTextStyle: MoonTextStyles.heading.text12, - contentTextStyle: MoonTextStyles.body.text12, - ); - - static final md = MoonAccordionItemSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - headerHeight: MoonSizes.sizes.md, - iconSizeValue: MoonSizes.sizes.xs, - headerPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - headerTextStyle: MoonTextStyles.heading.textDefault, - contentTextStyle: MoonTextStyles.body.textDefault, - ); - - static final lg = MoonAccordionItemSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - headerHeight: MoonSizes.sizes.lg, - iconSizeValue: MoonSizes.sizes.xs, - headerPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - headerTextStyle: MoonTextStyles.heading.textDefault, - contentTextStyle: MoonTextStyles.body.textDefault, - ); - - static final xl = MoonAccordionItemSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - headerHeight: MoonSizes.sizes.xl, - iconSizeValue: MoonSizes.sizes.xs, - headerPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), - headerTextStyle: MoonTextStyles.heading.text16, - contentTextStyle: MoonTextStyles.body.textDefault, - ); - - /// Accordion item border radius. +class MoonAccordionSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { + /// Accordion border radius. final BorderRadiusGeometry borderRadius; /// Accordion header height. @@ -64,7 +23,7 @@ class MoonAccordionItemSizeProperties extends ThemeExtension? other, double t) { - if (other is! MoonAccordionItemSizeProperties) return this; + MoonAccordionSizeProperties lerp(ThemeExtension? other, double t) { + if (other is! MoonAccordionSizeProperties) return this; - return MoonAccordionItemSizeProperties( + return MoonAccordionSizeProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, headerHeight: lerpDouble(headerHeight, other.headerHeight, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, @@ -110,7 +69,7 @@ class MoonAccordionItemSizeProperties extends ThemeExtension("borderRadius", borderRadius)) ..add(DoubleProperty("headerHeight", headerHeight)) ..add(DoubleProperty("iconSizeValue", iconSizeValue)) diff --git a/lib/src/theme/accordion/accordion_sizes.dart b/lib/src/theme/accordion/accordion_sizes.dart new file mode 100644 index 00000000..47095ea7 --- /dev/null +++ b/lib/src/theme/accordion/accordion_sizes.dart @@ -0,0 +1,108 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/accordion/accordion_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; + +@immutable +class MoonAccordionSizes extends ThemeExtension with DiagnosticableTreeMixin { + /// MDS tokens. + final MoonTokens tokens; + + /// Small accordion properties. + final MoonAccordionSizeProperties sm; + + /// Medium accordion properties. + final MoonAccordionSizeProperties md; + + /// Large accordion properties. + final MoonAccordionSizeProperties lg; + + /// Extra large accordion properties. + final MoonAccordionSizeProperties xl; + + MoonAccordionSizes({ + required this.tokens, + MoonAccordionSizeProperties? sm, + MoonAccordionSizeProperties? md, + MoonAccordionSizeProperties? lg, + MoonAccordionSizeProperties? xl, + }) : sm = sm ?? + MoonAccordionSizeProperties( + borderRadius: tokens.borders.interactiveSm, + headerHeight: tokens.sizes.sm, + iconSizeValue: tokens.sizes.x2s, + headerPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), + headerTextStyle: tokens.typography.heading.text12, + contentTextStyle: tokens.typography.body.text12, + ), + md = md ?? + MoonAccordionSizeProperties( + borderRadius: tokens.borders.interactiveSm, + headerHeight: tokens.sizes.md, + iconSizeValue: tokens.sizes.xs, + headerPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), + headerTextStyle: tokens.typography.heading.textDefault, + contentTextStyle: tokens.typography.body.textDefault, + ), + lg = lg ?? + MoonAccordionSizeProperties( + borderRadius: tokens.borders.interactiveSm, + headerHeight: tokens.sizes.lg, + iconSizeValue: tokens.sizes.xs, + headerPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), + headerTextStyle: tokens.typography.heading.textDefault, + contentTextStyle: tokens.typography.body.textDefault, + ), + xl = xl ?? + MoonAccordionSizeProperties( + borderRadius: tokens.borders.interactiveSm, + headerHeight: tokens.sizes.xl, + iconSizeValue: tokens.sizes.xs, + headerPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), + headerTextStyle: tokens.typography.heading.text16, + contentTextStyle: tokens.typography.body.textDefault, + ); + + @override + MoonAccordionSizes copyWith({ + MoonTokens? tokens, + MoonAccordionSizeProperties? sm, + MoonAccordionSizeProperties? md, + MoonAccordionSizeProperties? lg, + MoonAccordionSizeProperties? xl, + }) { + return MoonAccordionSizes( + tokens: tokens ?? this.tokens, + sm: sm ?? this.sm, + md: md ?? this.md, + lg: lg ?? this.lg, + xl: xl ?? this.xl, + ); + } + + @override + MoonAccordionSizes lerp(ThemeExtension? other, double t) { + if (other is! MoonAccordionSizes) return this; + + return MoonAccordionSizes( + tokens: tokens.lerp(other.tokens, t), + sm: sm.lerp(other.sm, t), + md: md.lerp(other.md, t), + lg: lg.lerp(other.lg, t), + xl: xl.lerp(other.xl, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonAccordionSizes")) + ..add(DiagnosticsProperty("tokens", tokens)) + ..add(DiagnosticsProperty("sm", sm)) + ..add(DiagnosticsProperty("md", md)) + ..add(DiagnosticsProperty("lg", lg)) + ..add(DiagnosticsProperty("xl", xl)); + } +} diff --git a/lib/src/theme/accordion/accordion_theme.dart b/lib/src/theme/accordion/accordion_theme.dart index d93cb7aa..cc24cc4b 100644 --- a/lib/src/theme/accordion/accordion_theme.dart +++ b/lib/src/theme/accordion/accordion_theme.dart @@ -1,58 +1,73 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/accordion/accordion_item_colors.dart'; -import 'package:moon_design/src/theme/accordion/accordion_item_properties.dart'; -import 'package:moon_design/src/theme/accordion/accordion_item_shadows.dart'; -import 'package:moon_design/src/theme/accordion/accordion_item_sizes.dart'; +import 'package:moon_design/src/theme/accordion/accordion_colors.dart'; +import 'package:moon_design/src/theme/accordion/accordion_properties.dart'; +import 'package:moon_design/src/theme/accordion/accordion_shadows.dart'; +import 'package:moon_design/src/theme/accordion/accordion_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonAccordionTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonAccordionTheme( - itemColors: MoonAccordionItemColors.light, - itemProperties: MoonAccordionItemProperties.properties, - itemShadows: MoonAccordionItemShadows.light, - itemSizes: MoonAccordionItemSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; - static final dark = MoonAccordionTheme( - itemColors: MoonAccordionItemColors.dark, - itemProperties: MoonAccordionItemProperties.properties, - itemShadows: MoonAccordionItemShadows.dark, - itemSizes: MoonAccordionItemSizes.sizes, - ); + /// Accordion colors. + final MoonAccordionColors colors; - /// Accordion item colors. - final MoonAccordionItemColors itemColors; + /// Accordion properties. + final MoonAccordionProperties properties; - /// Accordion item properties. - final MoonAccordionItemProperties itemProperties; + /// Accordion shadows. + final MoonAccordionShadows shadows; - /// Accordion item shadows. - final MoonAccordionItemShadows itemShadows; + /// Accordion sizes. + final MoonAccordionSizes sizes; - /// Accordion item sizes. - final MoonAccordionItemSizes itemSizes; - - const MoonAccordionTheme({ - required this.itemColors, - required this.itemProperties, - required this.itemShadows, - required this.itemSizes, - }); + MoonAccordionTheme({ + required this.tokens, + MoonAccordionColors? colors, + MoonAccordionProperties? properties, + MoonAccordionShadows? shadows, + MoonAccordionSizes? sizes, + }) : colors = colors ?? + MoonAccordionColors( + backgroundColor: tokens.colors.gohan, + borderColor: tokens.colors.beerus, + contentColor: tokens.colors.textPrimary, + dividerColor: tokens.colors.beerus, + expandedBackgroundColor: tokens.colors.gohan, + expandedLeadingColor: tokens.colors.textPrimary, + expandedTitleColor: tokens.colors.textPrimary, + expandedTrailingColor: tokens.colors.textPrimary, + expandedTrailingIconColor: tokens.colors.textPrimary, + leadingColor: tokens.colors.textPrimary, + titleColor: tokens.colors.textPrimary, + trailingColor: tokens.colors.textPrimary, + trailingIconColor: tokens.colors.textSecondary, + ), + properties = properties ?? + MoonAccordionProperties( + transitionDuration: tokens.transitions.defaultTransitionDuration, + transitionCurve: tokens.transitions.defaultTransitionCurve, + ), + shadows = shadows ?? MoonAccordionShadows(shadows: tokens.shadows.sm), + sizes = sizes ?? MoonAccordionSizes(tokens: tokens); @override MoonAccordionTheme copyWith({ - MoonAccordionItemColors? itemColors, - MoonAccordionItemProperties? itemProperties, - MoonAccordionItemShadows? itemShadows, - MoonAccordionItemSizes? itemSizes, + MoonTokens? tokens, + MoonAccordionColors? colors, + MoonAccordionProperties? properties, + MoonAccordionShadows? shadows, + MoonAccordionSizes? sizes, }) { return MoonAccordionTheme( - itemColors: itemColors ?? this.itemColors, - itemProperties: itemProperties ?? this.itemProperties, - itemShadows: itemShadows ?? this.itemShadows, - itemSizes: itemSizes ?? this.itemSizes, + tokens: tokens ?? this.tokens, + colors: colors ?? this.colors, + properties: properties ?? this.properties, + shadows: shadows ?? this.shadows, + sizes: sizes ?? this.sizes, ); } @@ -61,10 +76,11 @@ class MoonAccordionTheme extends ThemeExtension with Diagnos if (other is! MoonAccordionTheme) return this; return MoonAccordionTheme( - itemColors: itemColors.lerp(other.itemColors, t), - itemProperties: itemProperties.lerp(other.itemProperties, t), - itemShadows: itemShadows.lerp(other.itemShadows, t), - itemSizes: itemSizes.lerp(other.itemSizes, t), + tokens: tokens.lerp(other.tokens, t), + colors: colors.lerp(other.colors, t), + properties: properties.lerp(other.properties, t), + shadows: shadows.lerp(other.shadows, t), + sizes: sizes.lerp(other.sizes, t), ); } @@ -73,9 +89,10 @@ class MoonAccordionTheme extends ThemeExtension with Diagnos super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonAccordionTheme")) - ..add(DiagnosticsProperty("itemColors", itemColors)) - ..add(DiagnosticsProperty("itemProperties", itemProperties)) - ..add(DiagnosticsProperty("itemShadows", itemShadows)) - ..add(DiagnosticsProperty("itemSizes", itemSizes)); + ..add(DiagnosticsProperty("tokens", tokens)) + ..add(DiagnosticsProperty("colors", colors)) + ..add(DiagnosticsProperty("properties", properties)) + ..add(DiagnosticsProperty("shadows", shadows)) + ..add(DiagnosticsProperty("sizes", sizes)); } } diff --git a/lib/src/theme/alert/alert_colors.dart b/lib/src/theme/alert/alert_colors.dart index 4a12abc3..0b46ec2e 100644 --- a/lib/src/theme/alert/alert_colors.dart +++ b/lib/src/theme/alert/alert_colors.dart @@ -1,27 +1,10 @@ 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'; @immutable class MoonAlertColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonAlertColors( - backgroundColor: MoonColors.light.gohan, - borderColor: MoonTypography.light.colors.bodySecondary, - iconColor: MoonIconColors.light.primaryColor, - textColor: MoonTypography.light.colors.bodyPrimary, - ); - - static final dark = MoonAlertColors( - backgroundColor: MoonColors.dark.gohan, - borderColor: MoonTypography.dark.colors.bodySecondary, - iconColor: MoonIconColors.dark.primaryColor, - textColor: MoonTypography.dark.colors.bodyPrimary, - ); - /// Alert background color. final Color backgroundColor; diff --git a/lib/src/theme/alert/alert_properties.dart b/lib/src/theme/alert/alert_properties.dart index 7978b466..e486aca7 100644 --- a/lib/src/theme/alert/alert_properties.dart +++ b/lib/src/theme/alert/alert_properties.dart @@ -3,24 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonAlertProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonAlertProperties( - borderRadius: MoonBorders.borders.interactiveSm, - horizontalGap: MoonSizes.sizes.x3s, - minimumHeight: MoonSizes.sizes.xl, - verticalGap: MoonSizes.sizes.x4s, - transitionDuration: const Duration(milliseconds: 200), - transitionCurve: Curves.easeInOutCubic, - padding: EdgeInsets.all(MoonSizes.sizes.x2s), - bodyTextStyle: MoonTextStyles.body.textDefault, - titleTextStyle: MoonTextStyles.heading.textDefault, - ); - /// Border radius for alert. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/alert/alert_theme.dart b/lib/src/theme/alert/alert_theme.dart index f45873ba..ea6249ee 100644 --- a/lib/src/theme/alert/alert_theme.dart +++ b/lib/src/theme/alert/alert_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/alert/alert_colors.dart'; import 'package:moon_design/src/theme/alert/alert_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonAlertTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonAlertTheme( - colors: MoonAlertColors.light, - properties: MoonAlertProperties.properties, - ); - - static final dark = MoonAlertTheme( - colors: MoonAlertColors.dark, - properties: MoonAlertProperties.properties, - ); + /// MDS tokens. + final MoonTokens tokens; /// Alert colors. final MoonAlertColors colors; @@ -22,17 +16,38 @@ class MoonAlertTheme extends ThemeExtension with DiagnosticableT /// Alert properties. final MoonAlertProperties properties; - const MoonAlertTheme({ - required this.colors, - required this.properties, - }); + MoonAlertTheme({ + required this.tokens, + MoonAlertColors? colors, + MoonAlertProperties? properties, + }) : colors = colors ?? + MoonAlertColors( + backgroundColor: tokens.colors.gohan, + borderColor: tokens.colors.textSecondary, + iconColor: tokens.colors.iconPrimary, + textColor: tokens.colors.textPrimary, + ), + properties = properties ?? + MoonAlertProperties( + borderRadius: tokens.borders.interactiveSm, + horizontalGap: tokens.sizes.x3s, + minimumHeight: tokens.sizes.xl, + verticalGap: tokens.sizes.x4s, + transitionDuration: tokens.transitions.defaultTransitionDuration, + transitionCurve: tokens.transitions.defaultTransitionCurve, + padding: EdgeInsets.all(tokens.sizes.x2s), + bodyTextStyle: tokens.typography.body.textDefault, + titleTextStyle: tokens.typography.heading.textDefault, + ); @override MoonAlertTheme copyWith({ + MoonTokens? tokens, MoonAlertColors? colors, MoonAlertProperties? properties, }) { return MoonAlertTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); @@ -43,6 +58,7 @@ class MoonAlertTheme extends ThemeExtension with DiagnosticableT if (other is! MoonAlertTheme) return this; return MoonAlertTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); @@ -53,6 +69,7 @@ class MoonAlertTheme extends ThemeExtension with DiagnosticableT super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonAlertTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)); } diff --git a/lib/src/theme/authcode/authcode_colors.dart b/lib/src/theme/authcode/authcode_colors.dart index afb12d66..0cfa2652 100644 --- a/lib/src/theme/authcode/authcode_colors.dart +++ b/lib/src/theme/authcode/authcode_colors.dart @@ -1,34 +1,10 @@ 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 class MoonAuthCodeColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonAuthCodeColors( - selectedBorderColor: MoonColors.light.piccolo, - activeBorderColor: MoonColors.light.beerus, - inactiveBorderColor: MoonColors.light.beerus, - errorBorderColor: MoonColors.light.chiChi100, - selectedFillColor: MoonColors.light.gohan, - activeFillColor: MoonColors.light.gohan, - inactiveFillColor: MoonColors.light.gohan, - textColor: MoonTypography.light.colors.bodyPrimary, - ); - - static final dark = MoonAuthCodeColors( - selectedBorderColor: MoonColors.dark.piccolo, - activeBorderColor: MoonColors.dark.beerus, - inactiveBorderColor: MoonColors.dark.beerus, - errorBorderColor: MoonColors.dark.chiChi100, - selectedFillColor: MoonColors.dark.gohan, - activeFillColor: MoonColors.dark.gohan, - inactiveFillColor: MoonColors.dark.gohan, - textColor: MoonTypography.dark.colors.bodyPrimary, - ); - /// Border color of the selected auth input field. final Color selectedBorderColor; diff --git a/lib/src/theme/authcode/authcode_properties.dart b/lib/src/theme/authcode/authcode_properties.dart index d745b208..a5f0413f 100644 --- a/lib/src/theme/authcode/authcode_properties.dart +++ b/lib/src/theme/authcode/authcode_properties.dart @@ -3,26 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonAuthCodeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonAuthCodeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - gap: MoonSizes.sizes.x4s, - height: MoonSizes.sizes.xl, - width: MoonSizes.sizes.lg, - animationDuration: const Duration(milliseconds: 200), - errorAnimationDuration: const Duration(milliseconds: 200), - peekDuration: const Duration(milliseconds: 200), - animationCurve: Curves.easeInOutCubic, - errorAnimationCurve: Curves.easeInOutCubic, - textStyle: MoonTextStyles.body.text24, - errorTextStyle: MoonTextStyles.body.text12, - ); - /// Border radius of the auth input field. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/authcode/authcode_theme.dart b/lib/src/theme/authcode/authcode_theme.dart index a6b035cc..1e96be33 100644 --- a/lib/src/theme/authcode/authcode_theme.dart +++ b/lib/src/theme/authcode/authcode_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/authcode/authcode_colors.dart'; import 'package:moon_design/src/theme/authcode/authcode_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonAuthCodeTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonAuthCodeTheme( - colors: MoonAuthCodeColors.light, - properties: MoonAuthCodeProperties.properties, - ); - - static final dark = MoonAuthCodeTheme( - colors: MoonAuthCodeColors.dark, - properties: MoonAuthCodeProperties.properties, - ); + /// MDS tokens. + final MoonTokens tokens; /// AuthCode colors. final MoonAuthCodeColors colors; @@ -22,17 +16,44 @@ class MoonAuthCodeTheme extends ThemeExtension with Diagnosti /// AuthCode properties. final MoonAuthCodeProperties properties; - const MoonAuthCodeTheme({ - required this.colors, - required this.properties, - }); + MoonAuthCodeTheme({ + required this.tokens, + MoonAuthCodeColors? colors, + MoonAuthCodeProperties? properties, + }) : colors = colors ?? + MoonAuthCodeColors( + selectedBorderColor: tokens.colors.piccolo, + activeBorderColor: tokens.colors.beerus, + inactiveBorderColor: tokens.colors.beerus, + errorBorderColor: tokens.colors.chiChi100, + selectedFillColor: tokens.colors.gohan, + activeFillColor: tokens.colors.gohan, + inactiveFillColor: tokens.colors.gohan, + textColor: tokens.colors.textPrimary, + ), + properties = properties ?? + MoonAuthCodeProperties( + borderRadius: tokens.borders.interactiveSm, + gap: tokens.sizes.x4s, + height: tokens.sizes.xl, + width: tokens.sizes.lg, + animationDuration: tokens.transitions.defaultTransitionDuration, + errorAnimationDuration: tokens.transitions.defaultTransitionDuration, + peekDuration: tokens.transitions.defaultTransitionDuration, + animationCurve: tokens.transitions.defaultTransitionCurve, + errorAnimationCurve: tokens.transitions.defaultTransitionCurve, + textStyle: tokens.typography.body.text24, + errorTextStyle: tokens.typography.body.text12, + ); @override MoonAuthCodeTheme copyWith({ + MoonTokens? tokens, MoonAuthCodeColors? colors, MoonAuthCodeProperties? properties, }) { return MoonAuthCodeTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); @@ -43,6 +64,7 @@ class MoonAuthCodeTheme extends ThemeExtension with Diagnosti if (other is! MoonAuthCodeTheme) return this; return MoonAuthCodeTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); @@ -53,6 +75,7 @@ class MoonAuthCodeTheme extends ThemeExtension with Diagnosti super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonAuthCodeTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)); } diff --git a/lib/src/theme/avatar/avatar_colors.dart b/lib/src/theme/avatar/avatar_colors.dart index 5aba27fe..ff4ed7d4 100644 --- a/lib/src/theme/avatar/avatar_colors.dart +++ b/lib/src/theme/avatar/avatar_colors.dart @@ -1,27 +1,10 @@ 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( - backgroundColor: MoonColors.light.gohan, - badgeColor: MoonColors.light.roshi100, - iconColor: MoonIconTheme.light.colors.primaryColor, - textColor: MoonTypography.light.colors.bodyPrimary, - ); - - static final dark = MoonAvatarColors( - backgroundColor: MoonColors.dark.gohan, - badgeColor: MoonColors.dark.roshi100, - iconColor: MoonIconTheme.dark.colors.primaryColor, - textColor: MoonTypography.dark.colors.bodyPrimary, - ); - /// Avatar background color. final Color backgroundColor; diff --git a/lib/src/theme/avatar/avatar_size_properties.dart b/lib/src/theme/avatar/avatar_size_properties.dart index 775a3f42..b90ed6fb 100644 --- a/lib/src/theme/avatar/avatar_size_properties.dart +++ b/lib/src/theme/avatar/avatar_size_properties.dart @@ -3,63 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonAvatarSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final _badgeToAvatarRatio = MoonSizes.sizes.x3s / MoonSizes.sizes.x2l; - static final _badgeMarginValueToAvatarRatio = MoonSizes.sizes.x5s / MoonSizes.sizes.x2l; - - static final xs = MoonAvatarSizeProperties( - borderRadius: MoonBorders.borders.interactiveXs, - avatarSizeValue: MoonSizes.sizes.xs, - badgeMarginValue: MoonSizes.sizes.xs * _badgeMarginValueToAvatarRatio, - badgeSizeValue: MoonSizes.sizes.xs * _badgeToAvatarRatio, - textStyle: MoonTextStyles.heading.text10, - ); - - static final sm = MoonAvatarSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - avatarSizeValue: MoonSizes.sizes.sm, - badgeMarginValue: MoonSizes.sizes.sm * _badgeMarginValueToAvatarRatio, - badgeSizeValue: MoonSizes.sizes.sm * _badgeToAvatarRatio, - textStyle: MoonTextStyles.heading.text12, - ); - - static final md = MoonAvatarSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - avatarSizeValue: MoonSizes.sizes.md, - badgeMarginValue: MoonSizes.sizes.md * _badgeMarginValueToAvatarRatio, - badgeSizeValue: MoonSizes.sizes.md * _badgeToAvatarRatio, - textStyle: MoonTextStyles.heading.textDefault, - ); - - static final lg = MoonAvatarSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - avatarSizeValue: MoonSizes.sizes.lg, - badgeMarginValue: MoonSizes.sizes.lg * _badgeMarginValueToAvatarRatio, - badgeSizeValue: MoonSizes.sizes.lg * _badgeToAvatarRatio, - textStyle: MoonTextStyles.heading.text16, - ); - - static final xl = MoonAvatarSizeProperties( - borderRadius: MoonBorders.borders.interactiveMd, - avatarSizeValue: MoonSizes.sizes.xl, - badgeMarginValue: MoonSizes.sizes.xl * _badgeMarginValueToAvatarRatio, - badgeSizeValue: MoonSizes.sizes.xl * _badgeToAvatarRatio, - textStyle: MoonTextStyles.heading.text16, - ); - - static final x2l = MoonAvatarSizeProperties( - borderRadius: MoonBorders.borders.interactiveMd, - avatarSizeValue: MoonSizes.sizes.x2l, - badgeMarginValue: MoonSizes.sizes.x2l * _badgeMarginValueToAvatarRatio, - badgeSizeValue: MoonSizes.sizes.x2l * _badgeToAvatarRatio, - textStyle: MoonTextStyles.heading.text20, - ); - /// Avatar border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/avatar/avatar_sizes.dart b/lib/src/theme/avatar/avatar_sizes.dart index a8bc6f73..398c85c0 100644 --- a/lib/src/theme/avatar/avatar_sizes.dart +++ b/lib/src/theme/avatar/avatar_sizes.dart @@ -2,17 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/avatar/avatar_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonAvatarSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonAvatarSizes( - xs: MoonAvatarSizeProperties.xs, - sm: MoonAvatarSizeProperties.sm, - md: MoonAvatarSizeProperties.md, - lg: MoonAvatarSizeProperties.lg, - xl: MoonAvatarSizeProperties.xl, - x2l: MoonAvatarSizeProperties.x2l, - ); + /// MDS tokens. + final MoonTokens tokens; /// Extra small avatar properties. final MoonAvatarSizeProperties xs; @@ -32,17 +27,66 @@ class MoonAvatarSizes extends ThemeExtension with Diagnosticabl /// (2x) Extra large avatar properties. final MoonAvatarSizeProperties x2l; - const MoonAvatarSizes({ - required this.xs, - required this.sm, - required this.md, - required this.lg, - required this.xl, - required this.x2l, - }); + MoonAvatarSizes({ + required this.tokens, + MoonAvatarSizeProperties? xs, + MoonAvatarSizeProperties? sm, + MoonAvatarSizeProperties? md, + MoonAvatarSizeProperties? lg, + MoonAvatarSizeProperties? xl, + MoonAvatarSizeProperties? x2l, + }) : xs = xs ?? + MoonAvatarSizeProperties( + borderRadius: tokens.borders.interactiveXs, + avatarSizeValue: tokens.sizes.xs, + badgeMarginValue: tokens.sizes.xs * tokens.sizes.x5s / tokens.sizes.x2l, + badgeSizeValue: tokens.sizes.xs * tokens.sizes.x3s / tokens.sizes.x2l, + textStyle: tokens.typography.heading.text10, + ), + sm = sm ?? + MoonAvatarSizeProperties( + borderRadius: tokens.borders.interactiveSm, + avatarSizeValue: tokens.sizes.sm, + badgeMarginValue: tokens.sizes.sm * tokens.sizes.x5s / tokens.sizes.x2l, + badgeSizeValue: tokens.sizes.sm * tokens.sizes.x3s / tokens.sizes.x2l, + textStyle: tokens.typography.heading.text12, + ), + md = md ?? + MoonAvatarSizeProperties( + borderRadius: tokens.borders.interactiveSm, + avatarSizeValue: tokens.sizes.md, + badgeMarginValue: tokens.sizes.md * tokens.sizes.x5s / tokens.sizes.x2l, + badgeSizeValue: tokens.sizes.md * tokens.sizes.x3s / tokens.sizes.x2l, + textStyle: tokens.typography.heading.textDefault, + ), + lg = lg ?? + MoonAvatarSizeProperties( + borderRadius: tokens.borders.interactiveSm, + avatarSizeValue: tokens.sizes.lg, + badgeMarginValue: tokens.sizes.lg * tokens.sizes.x5s / tokens.sizes.x2l, + badgeSizeValue: tokens.sizes.lg * tokens.sizes.x3s / tokens.sizes.x2l, + textStyle: tokens.typography.heading.text16, + ), + xl = xl ?? + MoonAvatarSizeProperties( + borderRadius: tokens.borders.interactiveMd, + avatarSizeValue: tokens.sizes.xl, + badgeMarginValue: tokens.sizes.xl * tokens.sizes.x5s / tokens.sizes.x2l, + badgeSizeValue: tokens.sizes.xl * tokens.sizes.x3s / tokens.sizes.x2l, + textStyle: tokens.typography.heading.text16, + ), + x2l = x2l ?? + MoonAvatarSizeProperties( + borderRadius: tokens.borders.interactiveMd, + avatarSizeValue: tokens.sizes.x2l, + badgeMarginValue: tokens.sizes.x2l * tokens.sizes.x5s / tokens.sizes.x2l, + badgeSizeValue: tokens.sizes.x2l * tokens.sizes.x3s / tokens.sizes.x2l, + textStyle: tokens.typography.heading.text20, + ); @override MoonAvatarSizes copyWith({ + MoonTokens? tokens, MoonAvatarSizeProperties? xs, MoonAvatarSizeProperties? sm, MoonAvatarSizeProperties? md, @@ -51,6 +95,7 @@ class MoonAvatarSizes extends ThemeExtension with Diagnosticabl MoonAvatarSizeProperties? x2l, }) { return MoonAvatarSizes( + tokens: tokens ?? this.tokens, xs: xs ?? this.xs, sm: sm ?? this.sm, md: md ?? this.md, @@ -65,6 +110,7 @@ class MoonAvatarSizes extends ThemeExtension with Diagnosticabl if (other is! MoonAvatarSizes) return this; return MoonAvatarSizes( + tokens: tokens, xs: xs.lerp(other.xs, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), @@ -79,6 +125,7 @@ class MoonAvatarSizes extends ThemeExtension with Diagnosticabl super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAvatarSizes")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)) diff --git a/lib/src/theme/avatar/avatar_theme.dart b/lib/src/theme/avatar/avatar_theme.dart index dd0117dc..a231c54c 100644 --- a/lib/src/theme/avatar/avatar_theme.dart +++ b/lib/src/theme/avatar/avatar_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/avatar/avatar_colors.dart'; import 'package:moon_design/src/theme/avatar/avatar_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonAvatarTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonAvatarTheme( - colors: MoonAvatarColors.light, - sizes: MoonAvatarSizes.sizes, - ); - - static final dark = MoonAvatarTheme( - colors: MoonAvatarColors.dark, - sizes: MoonAvatarSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// Avatar colors. final MoonAvatarColors colors; @@ -22,17 +16,27 @@ class MoonAvatarTheme extends ThemeExtension with Diagnosticabl /// Avatar sizes. final MoonAvatarSizes sizes; - const MoonAvatarTheme({ - required this.colors, - required this.sizes, - }); + MoonAvatarTheme({ + required this.tokens, + MoonAvatarColors? colors, + MoonAvatarSizes? sizes, + }) : colors = colors ?? + MoonAvatarColors( + backgroundColor: tokens.colors.gohan, + badgeColor: tokens.colors.roshi100, + iconColor: tokens.colors.iconPrimary, + textColor: tokens.colors.textPrimary, + ), + sizes = sizes ?? MoonAvatarSizes(tokens: tokens); @override MoonAvatarTheme copyWith({ + MoonTokens? tokens, MoonAvatarColors? colors, MoonAvatarSizes? sizes, }) { return MoonAvatarTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); @@ -43,6 +47,7 @@ class MoonAvatarTheme extends ThemeExtension with Diagnosticabl if (other is! MoonAvatarTheme) return this; return MoonAvatarTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); @@ -53,6 +58,7 @@ class MoonAvatarTheme extends ThemeExtension with Diagnosticabl super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAvatarTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } diff --git a/lib/src/theme/bottom_sheet/bottom_sheet_colors.dart b/lib/src/theme/bottom_sheet/bottom_sheet_colors.dart index 7061ea68..836a47df 100644 --- a/lib/src/theme/bottom_sheet/bottom_sheet_colors.dart +++ b/lib/src/theme/bottom_sheet/bottom_sheet_colors.dart @@ -1,27 +1,10 @@ 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 MoonBottomSheetColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonBottomSheetColors( - textColor: MoonTypography.light.colors.bodyPrimary, - iconColor: MoonIconTheme.light.colors.primaryColor, - backgroundColor: MoonColors.light.gohan, - barrierColor: MoonColors.light.zeno, - ); - - static final dark = MoonBottomSheetColors( - textColor: MoonTypography.dark.colors.bodyPrimary, - iconColor: MoonIconTheme.dark.colors.primaryColor, - backgroundColor: MoonColors.dark.gohan, - barrierColor: MoonColors.dark.zeno, - ); - /// BottomSheet text color. final Color textColor; diff --git a/lib/src/theme/bottom_sheet/bottom_sheet_properties.dart b/lib/src/theme/bottom_sheet/bottom_sheet_properties.dart index 94f9c494..e3d62352 100644 --- a/lib/src/theme/bottom_sheet/bottom_sheet_properties.dart +++ b/lib/src/theme/bottom_sheet/bottom_sheet_properties.dart @@ -1,18 +1,8 @@ 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 MoonBottomSheetProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonBottomSheetProperties( - borderRadius: MoonBorders.borders.surfaceLg, - transitionDuration: const Duration(milliseconds: 200), - transitionCurve: Curves.easeInOutCubic, - textStyle: MoonTextStyles.body.textDefault, - ); - /// BottomSheet border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/bottom_sheet/bottom_sheet_size_properties.dart b/lib/src/theme/bottom_sheet/bottom_sheet_size_properties.dart index 75e22b98..03d14d8a 100644 --- a/lib/src/theme/bottom_sheet/bottom_sheet_size_properties.dart +++ b/lib/src/theme/bottom_sheet/bottom_sheet_size_properties.dart @@ -5,22 +5,6 @@ import 'package:flutter/material.dart'; @immutable class MoonBottomSheetSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static const sm = MoonBottomSheetSizeProperties( - normalisedHeight: 0.32, - ); - - static const md = MoonBottomSheetSizeProperties( - normalisedHeight: 0.64, - ); - - static const lg = MoonBottomSheetSizeProperties( - normalisedHeight: 0.88, - ); - - static const fullScreen = MoonBottomSheetSizeProperties( - normalisedHeight: 1.0, - ); - /// The normalised percentage value of the BottomSheet height. final double normalisedHeight; diff --git a/lib/src/theme/bottom_sheet/bottom_sheet_sizes.dart b/lib/src/theme/bottom_sheet/bottom_sheet_sizes.dart index 3e09a0db..2fb26922 100644 --- a/lib/src/theme/bottom_sheet/bottom_sheet_sizes.dart +++ b/lib/src/theme/bottom_sheet/bottom_sheet_sizes.dart @@ -2,15 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonBottomSheetSizes extends ThemeExtension with DiagnosticableTreeMixin { - static const sizes = MoonBottomSheetSizes( - sm: MoonBottomSheetSizeProperties.sm, - md: MoonBottomSheetSizeProperties.md, - lg: MoonBottomSheetSizeProperties.lg, - fullScreen: MoonBottomSheetSizeProperties.fullScreen, - ); + /// MDS tokens. + final MoonTokens tokens; /// Small BottomSheet properties. final MoonBottomSheetSizeProperties sm; @@ -24,21 +21,27 @@ class MoonBottomSheetSizes extends ThemeExtension with Dia /// Full screen BottomSheet properties. final MoonBottomSheetSizeProperties fullScreen; - const MoonBottomSheetSizes({ - required this.sm, - required this.md, - required this.lg, - required this.fullScreen, - }); + MoonBottomSheetSizes({ + required this.tokens, + MoonBottomSheetSizeProperties? sm, + MoonBottomSheetSizeProperties? md, + MoonBottomSheetSizeProperties? lg, + MoonBottomSheetSizeProperties? fullScreen, + }) : sm = sm ?? const MoonBottomSheetSizeProperties(normalisedHeight: 0.32), + md = md ?? const MoonBottomSheetSizeProperties(normalisedHeight: 0.64), + lg = lg ?? const MoonBottomSheetSizeProperties(normalisedHeight: 0.88), + fullScreen = fullScreen ?? const MoonBottomSheetSizeProperties(normalisedHeight: 1.0); @override MoonBottomSheetSizes copyWith({ + MoonTokens? tokens, MoonBottomSheetSizeProperties? sm, MoonBottomSheetSizeProperties? md, MoonBottomSheetSizeProperties? lg, MoonBottomSheetSizeProperties? fullScreen, }) { return MoonBottomSheetSizes( + tokens: tokens ?? this.tokens, sm: sm ?? this.sm, md: md ?? this.md, lg: lg ?? this.lg, @@ -51,6 +54,7 @@ class MoonBottomSheetSizes extends ThemeExtension with Dia if (other is! MoonBottomSheetSizes) return this; return MoonBottomSheetSizes( + tokens: tokens, sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), lg: lg.lerp(other.lg, t), @@ -63,6 +67,7 @@ class MoonBottomSheetSizes extends ThemeExtension with Dia super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonBottomSheetSizes")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)) ..add(DiagnosticsProperty("lg", lg)) diff --git a/lib/src/theme/bottom_sheet/bottom_sheet_theme.dart b/lib/src/theme/bottom_sheet/bottom_sheet_theme.dart index b0fda7f1..73701f44 100644 --- a/lib/src/theme/bottom_sheet/bottom_sheet_theme.dart +++ b/lib/src/theme/bottom_sheet/bottom_sheet_theme.dart @@ -4,20 +4,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_colors.dart'; import 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_properties.dart'; import 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonBottomSheetTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonBottomSheetTheme( - colors: MoonBottomSheetColors.light, - properties: MoonBottomSheetProperties.properties, - sizes: MoonBottomSheetSizes.sizes, - ); - - static final dark = MoonBottomSheetTheme( - colors: MoonBottomSheetColors.dark, - properties: MoonBottomSheetProperties.properties, - sizes: MoonBottomSheetSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// BottomSheet colors. final MoonBottomSheetColors colors; @@ -28,19 +20,36 @@ class MoonBottomSheetTheme extends ThemeExtension with Dia /// BottomSheet sizes. final MoonBottomSheetSizes sizes; - const MoonBottomSheetTheme({ - required this.colors, - required this.properties, - required this.sizes, - }); + MoonBottomSheetTheme({ + required this.tokens, + MoonBottomSheetColors? colors, + MoonBottomSheetProperties? properties, + MoonBottomSheetSizes? sizes, + }) : colors = colors ?? + MoonBottomSheetColors( + textColor: tokens.colors.textPrimary, + iconColor: tokens.colors.iconPrimary, + backgroundColor: tokens.colors.gohan, + barrierColor: tokens.colors.zeno, + ), + properties = properties ?? + MoonBottomSheetProperties( + borderRadius: tokens.borders.surfaceLg, + transitionDuration: tokens.transitions.defaultTransitionDuration, + transitionCurve: tokens.transitions.defaultTransitionCurve, + textStyle: tokens.typography.body.textDefault, + ), + sizes = sizes ?? MoonBottomSheetSizes(tokens: tokens); @override MoonBottomSheetTheme copyWith({ + MoonTokens? tokens, MoonBottomSheetColors? colors, MoonBottomSheetProperties? properties, MoonBottomSheetSizes? sizes, }) { return MoonBottomSheetTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, sizes: sizes ?? this.sizes, @@ -52,6 +61,7 @@ class MoonBottomSheetTheme extends ThemeExtension with Dia if (other is! MoonBottomSheetTheme) return this; return MoonBottomSheetTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), sizes: sizes.lerp(other.sizes, t), @@ -63,6 +73,7 @@ class MoonBottomSheetTheme extends ThemeExtension with Dia super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonBottomSheetTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("sizes", sizes)); diff --git a/lib/src/theme/button/button_colors.dart b/lib/src/theme/button/button_colors.dart index d5d7d9e8..8f9c8c46 100644 --- a/lib/src/theme/button/button_colors.dart +++ b/lib/src/theme/button/button_colors.dart @@ -1,32 +1,10 @@ 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 class MoonButtonColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonButtonColors( - borderColor: MoonColors.light.trunks, - textColor: MoonTypography.light.colors.bodyPrimary, - filledVariantBackgroundColor: MoonColors.light.piccolo, - filledVariantTextColor: MoonTypography.light.colors.controlPrimary, - textVariantTextColor: MoonTypography.light.colors.bodySecondary, - textVariantFocusColor: MoonColors.light.piccolo, - textVariantHoverColor: MoonColors.light.jiren, - ); - - static final dark = MoonButtonColors( - borderColor: MoonColors.dark.trunks, - textColor: MoonTypography.dark.colors.bodyPrimary, - filledVariantBackgroundColor: MoonColors.dark.piccolo, - filledVariantTextColor: MoonTypography.dark.colors.controlPrimary, - textVariantTextColor: MoonTypography.dark.colors.bodySecondary, - textVariantFocusColor: MoonColors.dark.piccolo, - textVariantHoverColor: MoonColors.dark.jiren, - ); - /// Button border color. final Color borderColor; diff --git a/lib/src/theme/button/button_size_properties.dart b/lib/src/theme/button/button_size_properties.dart index 9ddabc13..c7963dcc 100644 --- a/lib/src/theme/button/button_size_properties.dart +++ b/lib/src/theme/button/button_size_properties.dart @@ -3,57 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonButtonSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final xs = MoonButtonSizeProperties( - borderRadius: MoonBorders.borders.interactiveXs, - gap: MoonSizes.sizes.x5s, - height: MoonSizes.sizes.xs, - iconSizeValue: MoonSizes.sizes.x2s, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), - textStyle: MoonTextStyles.heading.text12, - ); - - static final sm = MoonButtonSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - gap: MoonSizes.sizes.x5s, - height: MoonSizes.sizes.sm, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - textStyle: MoonTextStyles.heading.textDefault, - ); - - static final md = MoonButtonSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - gap: MoonSizes.sizes.x4s, - height: MoonSizes.sizes.md, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), - textStyle: MoonTextStyles.heading.textDefault, - ); - - static final lg = MoonButtonSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - gap: MoonSizes.sizes.x3s, - height: MoonSizes.sizes.lg, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), - textStyle: MoonTextStyles.heading.text16, - ); - - static final xl = MoonButtonSizeProperties( - borderRadius: MoonBorders.borders.interactiveMd, - gap: MoonSizes.sizes.x2s, - height: MoonSizes.sizes.xl, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.xs), - textStyle: MoonTextStyles.heading.text16, - ); - /// Button border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/button/button_sizes.dart b/lib/src/theme/button/button_sizes.dart index 49cd2e45..b0f69218 100644 --- a/lib/src/theme/button/button_sizes.dart +++ b/lib/src/theme/button/button_sizes.dart @@ -2,16 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/button/button_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonButtonSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonButtonSizes( - xs: MoonButtonSizeProperties.xs, - sm: MoonButtonSizeProperties.sm, - md: MoonButtonSizeProperties.md, - lg: MoonButtonSizeProperties.lg, - xl: MoonButtonSizeProperties.xl, - ); + /// MDS tokens. + final MoonTokens tokens; /// Extra small button properties. final MoonButtonSizeProperties xs; @@ -28,16 +24,62 @@ class MoonButtonSizes extends ThemeExtension with Diagnosticabl /// Extra large button properties. final MoonButtonSizeProperties xl; - const MoonButtonSizes({ - required this.xs, - required this.sm, - required this.md, - required this.lg, - required this.xl, - }); + MoonButtonSizes({ + required this.tokens, + MoonButtonSizeProperties? xs, + MoonButtonSizeProperties? sm, + MoonButtonSizeProperties? md, + MoonButtonSizeProperties? lg, + MoonButtonSizeProperties? xl, + }) : xs = xs ?? + MoonButtonSizeProperties( + borderRadius: tokens.borders.interactiveXs, + gap: tokens.sizes.x5s, + height: tokens.sizes.xs, + iconSizeValue: tokens.sizes.x2s, + padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), + textStyle: tokens.typography.heading.text12, + ), + sm = sm ?? + MoonButtonSizeProperties( + borderRadius: tokens.borders.interactiveSm, + gap: tokens.sizes.x5s, + height: tokens.sizes.sm, + iconSizeValue: tokens.sizes.xs, + padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), + textStyle: tokens.typography.heading.textDefault, + ), + md = md ?? + MoonButtonSizeProperties( + borderRadius: tokens.borders.interactiveSm, + gap: tokens.sizes.x4s, + height: tokens.sizes.md, + iconSizeValue: tokens.sizes.xs, + padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), + textStyle: tokens.typography.heading.textDefault, + ), + lg = lg ?? + MoonButtonSizeProperties( + borderRadius: tokens.borders.interactiveSm, + gap: tokens.sizes.x3s, + height: tokens.sizes.lg, + iconSizeValue: tokens.sizes.xs, + padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), + textStyle: tokens.typography.heading.text16, + ), + xl = xl ?? + MoonButtonSizeProperties( + borderRadius: tokens.borders.interactiveMd, + gap: tokens.sizes.x2s, + height: tokens.sizes.xl, + iconSizeValue: tokens.sizes.xs, + padding: EdgeInsets.symmetric(horizontal: tokens.sizes.xs), + textStyle: tokens.typography.heading.text16, + ); @override MoonButtonSizes copyWith({ + MoonTokens? tokens, MoonButtonSizeProperties? xs, MoonButtonSizeProperties? sm, MoonButtonSizeProperties? md, @@ -45,6 +87,7 @@ class MoonButtonSizes extends ThemeExtension with Diagnosticabl MoonButtonSizeProperties? xl, }) { return MoonButtonSizes( + tokens: tokens ?? this.tokens, xs: xs ?? this.xs, sm: sm ?? this.sm, md: md ?? this.md, @@ -58,6 +101,7 @@ class MoonButtonSizes extends ThemeExtension with Diagnosticabl if (other is! MoonButtonSizes) return this; return MoonButtonSizes( + tokens: tokens.lerp(other.tokens, t), xs: xs.lerp(other.xs, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), @@ -71,6 +115,7 @@ class MoonButtonSizes extends ThemeExtension with Diagnosticabl super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonButtonSizes")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)) diff --git a/lib/src/theme/button/button_theme.dart b/lib/src/theme/button/button_theme.dart index 9c4baff9..325e7b5f 100644 --- a/lib/src/theme/button/button_theme.dart +++ b/lib/src/theme/button/button_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/button/button_colors.dart'; import 'package:moon_design/src/theme/button/button_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonButtonTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonButtonTheme( - colors: MoonButtonColors.light, - sizes: MoonButtonSizes.sizes, - ); - - static final dark = MoonButtonTheme( - colors: MoonButtonColors.dark, - sizes: MoonButtonSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// Button colors. final MoonButtonColors colors; @@ -22,17 +16,30 @@ class MoonButtonTheme extends ThemeExtension with Diagnosticabl /// Button sizes. final MoonButtonSizes sizes; - const MoonButtonTheme({ - required this.colors, - required this.sizes, - }); + MoonButtonTheme({ + required this.tokens, + MoonButtonColors? colors, + MoonButtonSizes? sizes, + }) : colors = colors ?? + MoonButtonColors( + borderColor: tokens.colors.trunks, + textColor: tokens.colors.textPrimary, + filledVariantBackgroundColor: tokens.colors.piccolo, + filledVariantTextColor: tokens.colors.goten, + textVariantTextColor: tokens.colors.textSecondary, + textVariantFocusColor: tokens.colors.piccolo, + textVariantHoverColor: tokens.colors.jiren, + ), + sizes = sizes ?? MoonButtonSizes(tokens: tokens); @override MoonButtonTheme copyWith({ + MoonTokens? tokens, MoonButtonColors? colors, MoonButtonSizes? sizes, }) { return MoonButtonTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); @@ -43,6 +50,7 @@ class MoonButtonTheme extends ThemeExtension with Diagnosticabl if (other is! MoonButtonTheme) return this; return MoonButtonTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); @@ -53,6 +61,7 @@ class MoonButtonTheme extends ThemeExtension with Diagnosticabl super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonButtonTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } diff --git a/lib/src/theme/carousel/carousel_colors.dart b/lib/src/theme/carousel/carousel_colors.dart index c74fd0f1..9ceddd05 100644 --- a/lib/src/theme/carousel/carousel_colors.dart +++ b/lib/src/theme/carousel/carousel_colors.dart @@ -1,21 +1,10 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.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 MoonCarouselColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonCarouselColors( - textColor: MoonTypography.light.colors.bodyPrimary, - iconColor: MoonIconTheme.light.colors.primaryColor, - ); - - static final dark = MoonCarouselColors( - textColor: MoonTypography.dark.colors.bodyPrimary, - iconColor: MoonIconTheme.dark.colors.primaryColor, - ); - /// Default text color of Carousel items. final Color textColor; diff --git a/lib/src/theme/carousel/carousel_properties.dart b/lib/src/theme/carousel/carousel_properties.dart index 0081b37e..c74cfda3 100644 --- a/lib/src/theme/carousel/carousel_properties.dart +++ b/lib/src/theme/carousel/carousel_properties.dart @@ -3,19 +3,8 @@ import 'dart:ui'; 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 MoonCarouselProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonCarouselProperties( - gap: MoonSizes.sizes.x2s, - textStyle: MoonTextStyles.body.textDefault, - autoPlayDelay: const Duration(seconds: 3), - transitionDuration: const Duration(milliseconds: 800), - transitionCurve: Curves.fastOutSlowIn, - ); - /// Gap between Carousel items. final double gap; diff --git a/lib/src/theme/carousel/carousel_theme.dart b/lib/src/theme/carousel/carousel_theme.dart index ef0cf4a9..0bb03081 100644 --- a/lib/src/theme/carousel/carousel_theme.dart +++ b/lib/src/theme/carousel/carousel_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/carousel/carousel_colors.dart'; import 'package:moon_design/src/theme/carousel/carousel_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCarouselTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonCarouselTheme( - colors: MoonCarouselColors.light, - properties: MoonCarouselProperties.properties, - ); - - static final dark = MoonCarouselTheme( - colors: MoonCarouselColors.dark, - properties: MoonCarouselProperties.properties, - ); + /// MDS tokens. + final MoonTokens tokens; /// Carousel colors. final MoonCarouselColors colors; @@ -22,17 +16,32 @@ class MoonCarouselTheme extends ThemeExtension with Diagnosti /// Carousel properties. final MoonCarouselProperties properties; - const MoonCarouselTheme({ - required this.colors, - required this.properties, - }); + MoonCarouselTheme({ + required this.tokens, + MoonCarouselColors? colors, + MoonCarouselProperties? properties, + }) : colors = colors ?? + MoonCarouselColors( + textColor: tokens.colors.textPrimary, + iconColor: tokens.colors.iconPrimary, + ), + properties = properties ?? + MoonCarouselProperties( + gap: tokens.sizes.x2s, + textStyle: tokens.typography.body.textDefault, + autoPlayDelay: const Duration(seconds: 3), + transitionDuration: const Duration(milliseconds: 800), + transitionCurve: Curves.fastOutSlowIn, + ); @override MoonCarouselTheme copyWith({ + MoonTokens? tokens, MoonCarouselColors? colors, MoonCarouselProperties? properties, }) { return MoonCarouselTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); @@ -43,6 +52,7 @@ class MoonCarouselTheme extends ThemeExtension with Diagnosti if (other is! MoonCarouselTheme) return this; return MoonCarouselTheme( + tokens: tokens, properties: properties.lerp(other.properties, t), colors: colors.lerp(other.colors, t), ); @@ -53,6 +63,7 @@ class MoonCarouselTheme extends ThemeExtension with Diagnosti super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonCarouselTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)); } diff --git a/lib/src/theme/checkbox/checkbox_colors.dart b/lib/src/theme/checkbox/checkbox_colors.dart index 611211d3..f650fd18 100644 --- a/lib/src/theme/checkbox/checkbox_colors.dart +++ b/lib/src/theme/checkbox/checkbox_colors.dart @@ -1,28 +1,10 @@ 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 class MoonCheckboxColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonCheckboxColors( - activeColor: MoonColors.light.piccolo, - borderColor: MoonColors.light.trunks, - checkColor: MoonColors.light.goten, - inactiveColor: Colors.transparent, - textColor: MoonTypography.light.colors.bodyPrimary, - ); - - static final dark = MoonCheckboxColors( - activeColor: MoonColors.dark.piccolo, - borderColor: MoonColors.dark.trunks, - checkColor: MoonColors.dark.goten, - inactiveColor: Colors.transparent, - textColor: MoonTypography.dark.colors.bodyPrimary, - ); - /// Checkbox active color. final Color activeColor; diff --git a/lib/src/theme/checkbox/checkbox_properties.dart b/lib/src/theme/checkbox/checkbox_properties.dart index a0bdcfa4..922fc2b0 100644 --- a/lib/src/theme/checkbox/checkbox_properties.dart +++ b/lib/src/theme/checkbox/checkbox_properties.dart @@ -1,16 +1,8 @@ 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; diff --git a/lib/src/theme/checkbox/checkbox_theme.dart b/lib/src/theme/checkbox/checkbox_theme.dart index 223ba460..eae8a40a 100644 --- a/lib/src/theme/checkbox/checkbox_theme.dart +++ b/lib/src/theme/checkbox/checkbox_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/checkbox/checkbox_colors.dart'; import 'package:moon_design/src/theme/checkbox/checkbox_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCheckboxTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonCheckboxTheme( - colors: MoonCheckboxColors.light, - properties: MoonCheckboxProperties.properties, - ); - - static final dark = MoonCheckboxTheme( - colors: MoonCheckboxColors.dark, - properties: MoonCheckboxProperties.properties, - ); + /// MDS tokens. + final MoonTokens tokens; /// Checkbox colors. final MoonCheckboxColors colors; @@ -22,17 +16,32 @@ class MoonCheckboxTheme extends ThemeExtension with Diagnosti /// Checkbox properties. final MoonCheckboxProperties properties; - const MoonCheckboxTheme({ - required this.colors, - required this.properties, - }); + MoonCheckboxTheme({ + required this.tokens, + MoonCheckboxColors? colors, + MoonCheckboxProperties? properties, + }) : colors = colors ?? + MoonCheckboxColors( + activeColor: tokens.colors.piccolo, + borderColor: tokens.colors.trunks, + checkColor: tokens.colors.goten, + inactiveColor: Colors.transparent, + textColor: tokens.colors.textPrimary, + ), + properties = properties ?? + MoonCheckboxProperties( + borderRadius: tokens.borders.interactiveXs, + textStyle: tokens.typography.body.textDefault, + ); @override MoonCheckboxTheme copyWith({ + MoonTokens? tokens, MoonCheckboxColors? colors, MoonCheckboxProperties? properties, }) { return MoonCheckboxTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); @@ -43,6 +52,7 @@ class MoonCheckboxTheme extends ThemeExtension with Diagnosti if (other is! MoonCheckboxTheme) return this; return MoonCheckboxTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); @@ -53,6 +63,7 @@ class MoonCheckboxTheme extends ThemeExtension with Diagnosti super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonCheckboxTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)); } diff --git a/lib/src/theme/chip/chip_colors.dart b/lib/src/theme/chip/chip_colors.dart index 338576cb..e89da7fa 100644 --- a/lib/src/theme/chip/chip_colors.dart +++ b/lib/src/theme/chip/chip_colors.dart @@ -1,26 +1,10 @@ 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 class MoonChipColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonChipColors( - activeColor: MoonColors.light.piccolo, - backgroundColor: MoonColors.light.gohan, - activeBackgroundColor: MoonColors.light.jiren, - textColor: MoonTypography.light.colors.bodyPrimary, - ); - - static final dark = MoonChipColors( - activeColor: MoonColors.dark.piccolo, - backgroundColor: MoonColors.dark.gohan, - activeBackgroundColor: MoonColors.dark.jiren, - textColor: MoonTypography.dark.colors.bodyPrimary, - ); - /// Chip text and border color when active. final Color activeColor; diff --git a/lib/src/theme/chip/chip_size_properties.dart b/lib/src/theme/chip/chip_size_properties.dart index 4b4e66ae..6e58b86b 100644 --- a/lib/src/theme/chip/chip_size_properties.dart +++ b/lib/src/theme/chip/chip_size_properties.dart @@ -3,30 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonChipSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final sm = MoonChipSizeProperties( - borderRadius: MoonBorders.borders.interactiveXs, - gap: MoonSizes.sizes.x4s, - height: MoonSizes.sizes.sm, - iconSizeValue: MoonSizes.sizes.x2s, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - textStyle: MoonTextStyles.heading.textDefault, - ); - - static final md = MoonChipSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - gap: MoonSizes.sizes.x4s, - height: MoonSizes.sizes.md, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - textStyle: MoonTextStyles.heading.textDefault, - ); - /// Chip border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/chip/chip_sizes.dart b/lib/src/theme/chip/chip_sizes.dart index 5db416a0..a178c881 100644 --- a/lib/src/theme/chip/chip_sizes.dart +++ b/lib/src/theme/chip/chip_sizes.dart @@ -1,13 +1,13 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; + import 'package:moon_design/src/theme/chip/chip_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonChipSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonChipSizes( - sm: MoonChipSizeProperties.sm, - md: MoonChipSizeProperties.md, - ); + /// MDS tokens. + final MoonTokens tokens; /// Small chip properties. final MoonChipSizeProperties sm; @@ -15,17 +15,37 @@ class MoonChipSizes extends ThemeExtension with DiagnosticableTre /// Medium chip properties. final MoonChipSizeProperties md; - const MoonChipSizes({ - required this.sm, - required this.md, - }); + MoonChipSizes({ + required this.tokens, + MoonChipSizeProperties? sm, + MoonChipSizeProperties? md, + }) : sm = sm ?? + MoonChipSizeProperties( + borderRadius: tokens.borders.interactiveXs, + gap: tokens.sizes.x4s, + height: tokens.sizes.sm, + iconSizeValue: tokens.sizes.x2s, + padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), + textStyle: tokens.typography.heading.textDefault, + ), + md = md ?? + MoonChipSizeProperties( + borderRadius: tokens.borders.interactiveSm, + gap: tokens.sizes.x4s, + height: tokens.sizes.md, + iconSizeValue: tokens.sizes.xs, + padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), + textStyle: tokens.typography.heading.textDefault, + ); @override MoonChipSizes copyWith({ + MoonTokens? tokens, MoonChipSizeProperties? sm, MoonChipSizeProperties? md, }) { return MoonChipSizes( + tokens: tokens ?? this.tokens, sm: sm ?? this.sm, md: md ?? this.md, ); @@ -36,6 +56,7 @@ class MoonChipSizes extends ThemeExtension with DiagnosticableTre if (other is! MoonChipSizes) return this; return MoonChipSizes( + tokens: tokens.lerp(other.tokens, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), ); @@ -46,6 +67,7 @@ class MoonChipSizes extends ThemeExtension with DiagnosticableTre super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonChipSizes")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)); } diff --git a/lib/src/theme/chip/chip_theme.dart b/lib/src/theme/chip/chip_theme.dart index 9d871707..73b055b7 100644 --- a/lib/src/theme/chip/chip_theme.dart +++ b/lib/src/theme/chip/chip_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/chip/chip_colors.dart'; import 'package:moon_design/src/theme/chip/chip_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonChipTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonChipTheme( - colors: MoonChipColors.light, - sizes: MoonChipSizes.sizes, - ); - - static final dark = MoonChipTheme( - colors: MoonChipColors.dark, - sizes: MoonChipSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// Chip colors. final MoonChipColors colors; @@ -22,17 +16,27 @@ class MoonChipTheme extends ThemeExtension with DiagnosticableTre /// Chip sizes. final MoonChipSizes sizes; - const MoonChipTheme({ - required this.colors, - required this.sizes, - }); + MoonChipTheme({ + required this.tokens, + MoonChipColors? colors, + MoonChipSizes? sizes, + }) : colors = colors ?? + MoonChipColors( + activeColor: tokens.colors.piccolo, + backgroundColor: tokens.colors.gohan, + activeBackgroundColor: tokens.colors.jiren, + textColor: tokens.colors.textPrimary, + ), + sizes = sizes ?? MoonChipSizes(tokens: tokens); @override MoonChipTheme copyWith({ + MoonTokens? tokens, MoonChipColors? colors, MoonChipSizes? sizes, }) { return MoonChipTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); @@ -43,6 +47,7 @@ class MoonChipTheme extends ThemeExtension with DiagnosticableTre if (other is! MoonChipTheme) return this; return MoonChipTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); @@ -53,6 +58,7 @@ class MoonChipTheme extends ThemeExtension with DiagnosticableTre super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonChipTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } diff --git a/lib/src/theme/dot_indicator/dot_indicator_colors.dart b/lib/src/theme/dot_indicator/dot_indicator_colors.dart index 8cc38325..8bb9f318 100644 --- a/lib/src/theme/dot_indicator/dot_indicator_colors.dart +++ b/lib/src/theme/dot_indicator/dot_indicator_colors.dart @@ -1,21 +1,10 @@ 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 MoonDotIndicatorColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonDotIndicatorColors( - selectedColor: MoonColors.light.piccolo, - unselectedColor: MoonColors.light.beerus, - ); - - static final dark = MoonDotIndicatorColors( - selectedColor: MoonColors.dark.piccolo, - unselectedColor: MoonColors.dark.beerus, - ); - /// Selected DotIndicator dot color. final Color selectedColor; diff --git a/lib/src/theme/dot_indicator/dot_indicator_properties.dart b/lib/src/theme/dot_indicator/dot_indicator_properties.dart index e0417769..1d096214 100644 --- a/lib/src/theme/dot_indicator/dot_indicator_properties.dart +++ b/lib/src/theme/dot_indicator/dot_indicator_properties.dart @@ -3,17 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/sizes.dart'; - @immutable class MoonDotIndicatorProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonDotIndicatorProperties( - gap: MoonSizes.sizes.x4s, - size: MoonSizes.sizes.x4s, - transitionDuration: const Duration(milliseconds: 200), - transitionCurve: Curves.easeInOutCubic, - ); - /// DotIndicator gap between dots. final double gap; diff --git a/lib/src/theme/dot_indicator/dot_indicator_theme.dart b/lib/src/theme/dot_indicator/dot_indicator_theme.dart index e8901def..4e369d29 100644 --- a/lib/src/theme/dot_indicator/dot_indicator_theme.dart +++ b/lib/src/theme/dot_indicator/dot_indicator_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/dot_indicator/dot_indicator_colors.dart'; import 'package:moon_design/src/theme/dot_indicator/dot_indicator_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonDotIndicatorTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonDotIndicatorTheme( - colors: MoonDotIndicatorColors.light, - properties: MoonDotIndicatorProperties.properties, - ); - - static final dark = MoonDotIndicatorTheme( - colors: MoonDotIndicatorColors.dark, - properties: MoonDotIndicatorProperties.properties, - ); + /// MDS tokens. + final MoonTokens tokens; /// DotIndicator colors. final MoonDotIndicatorColors colors; @@ -22,17 +16,31 @@ class MoonDotIndicatorTheme extends ThemeExtension with D /// DotIndicator properties. final MoonDotIndicatorProperties properties; - const MoonDotIndicatorTheme({ - required this.colors, - required this.properties, - }); + MoonDotIndicatorTheme({ + required this.tokens, + MoonDotIndicatorColors? colors, + MoonDotIndicatorProperties? properties, + }) : colors = colors ?? + MoonDotIndicatorColors( + selectedColor: tokens.colors.piccolo, + unselectedColor: tokens.colors.beerus, + ), + properties = properties ?? + MoonDotIndicatorProperties( + gap: tokens.sizes.x4s, + size: tokens.sizes.x4s, + transitionDuration: tokens.transitions.defaultTransitionDuration, + transitionCurve: tokens.transitions.defaultTransitionCurve, + ); @override MoonDotIndicatorTheme copyWith({ + MoonTokens? tokens, MoonDotIndicatorColors? colors, MoonDotIndicatorProperties? properties, }) { return MoonDotIndicatorTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); @@ -43,6 +51,7 @@ class MoonDotIndicatorTheme extends ThemeExtension with D if (other is! MoonDotIndicatorTheme) return this; return MoonDotIndicatorTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); @@ -53,6 +62,7 @@ class MoonDotIndicatorTheme extends ThemeExtension with D super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonDotIndicatorTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)); } diff --git a/lib/src/theme/drawer/drawer_colors.dart b/lib/src/theme/drawer/drawer_colors.dart index 43557c11..5bce4780 100644 --- a/lib/src/theme/drawer/drawer_colors.dart +++ b/lib/src/theme/drawer/drawer_colors.dart @@ -1,27 +1,10 @@ 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 MoonDrawerColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonDrawerColors( - textColor: MoonTypography.light.colors.bodyPrimary, - iconColor: MoonIconTheme.light.colors.primaryColor, - backgroundColor: MoonColors.light.gohan, - barrierColor: MoonColors.light.zeno, - ); - - static final dark = MoonDrawerColors( - textColor: MoonTypography.dark.colors.bodyPrimary, - iconColor: MoonIconTheme.dark.colors.primaryColor, - backgroundColor: MoonColors.dark.gohan, - barrierColor: MoonColors.dark.zeno, - ); - /// Drawer text color. final Color textColor; diff --git a/lib/src/theme/drawer/drawer_properties.dart b/lib/src/theme/drawer/drawer_properties.dart index e8bd1f93..080cff4f 100644 --- a/lib/src/theme/drawer/drawer_properties.dart +++ b/lib/src/theme/drawer/drawer_properties.dart @@ -3,16 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonDrawerProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonDrawerProperties( - borderRadius: BorderRadius.zero, - width: 448, - textStyle: MoonTextStyles.body.textDefault, - ); - /// Drawer border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/drawer/drawer_shadows.dart b/lib/src/theme/drawer/drawer_shadows.dart index aa42511f..dad259e4 100644 --- a/lib/src/theme/drawer/drawer_shadows.dart +++ b/lib/src/theme/drawer/drawer_shadows.dart @@ -1,18 +1,8 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/shadows.dart'; - @immutable class MoonDrawerShadows extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonDrawerShadows( - drawerShadows: MoonShadows.light.lg, - ); - - static final dark = MoonDrawerShadows( - drawerShadows: MoonShadows.dark.lg, - ); - /// Drawer shadows. final List drawerShadows; diff --git a/lib/src/theme/drawer/drawer_theme.dart b/lib/src/theme/drawer/drawer_theme.dart index 4271a655..6e4f8459 100644 --- a/lib/src/theme/drawer/drawer_theme.dart +++ b/lib/src/theme/drawer/drawer_theme.dart @@ -4,20 +4,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/drawer/drawer_colors.dart'; import 'package:moon_design/src/theme/drawer/drawer_properties.dart'; import 'package:moon_design/src/theme/drawer/drawer_shadows.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonDrawerTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonDrawerTheme( - colors: MoonDrawerColors.light, - properties: MoonDrawerProperties.properties, - shadows: MoonDrawerShadows.light, - ); - - static final dark = MoonDrawerTheme( - colors: MoonDrawerColors.dark, - properties: MoonDrawerProperties.properties, - shadows: MoonDrawerShadows.dark, - ); + /// MDS tokens. + final MoonTokens tokens; /// Drawer colors. final MoonDrawerColors colors; @@ -28,19 +20,35 @@ class MoonDrawerTheme extends ThemeExtension with Diagnosticabl /// Drawer shadows. final MoonDrawerShadows shadows; - const MoonDrawerTheme({ - required this.colors, - required this.properties, - required this.shadows, - }); + MoonDrawerTheme({ + required this.tokens, + MoonDrawerColors? colors, + MoonDrawerProperties? properties, + MoonDrawerShadows? shadows, + }) : colors = colors ?? + MoonDrawerColors( + textColor: tokens.colors.textPrimary, + iconColor: tokens.colors.iconPrimary, + backgroundColor: tokens.colors.gohan, + barrierColor: tokens.colors.zeno, + ), + properties = properties ?? + MoonDrawerProperties( + borderRadius: BorderRadius.zero, + width: 448, + textStyle: tokens.typography.body.textDefault, + ), + shadows = shadows ?? MoonDrawerShadows(drawerShadows: tokens.shadows.lg); @override MoonDrawerTheme copyWith({ + MoonTokens? tokens, MoonDrawerColors? colors, MoonDrawerProperties? properties, MoonDrawerShadows? shadows, }) { return MoonDrawerTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, @@ -52,6 +60,7 @@ class MoonDrawerTheme extends ThemeExtension with Diagnosticabl if (other is! MoonDrawerTheme) return this; return MoonDrawerTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), @@ -63,6 +72,7 @@ class MoonDrawerTheme extends ThemeExtension with Diagnosticabl super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonDrawerTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("shadows", shadows)); diff --git a/lib/src/theme/effects/controls_effects.dart b/lib/src/theme/effects/controls_effects.dart index 985c3e34..52ca8534 100644 --- a/lib/src/theme/effects/controls_effects.dart +++ b/lib/src/theme/effects/controls_effects.dart @@ -3,24 +3,10 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonControlsEffects extends ThemeExtension with DiagnosticableTreeMixin { - static const controlScaleEffect = MoonControlsEffects( - effectDuration: Duration(milliseconds: 150), - effectCurve: Curves.easeInOutCubic, - effectScalar: 0.95, - ); - - static final controlPulseEffect = MoonControlsEffects( - effectColor: MoonColors.light.piccolo, - effectDuration: const Duration(milliseconds: 1400), - effectCurve: Curves.easeInOutCubic, - effectExtent: 24, - ); - /// Controls effect color. final Color? effectColor; diff --git a/lib/src/theme/effects/effects.dart b/lib/src/theme/effects/effects.dart deleted file mode 100644 index 14a97603..00000000 --- a/lib/src/theme/effects/effects.dart +++ /dev/null @@ -1,81 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; - -import 'package:moon_design/src/theme/effects/controls_effects.dart'; -import 'package:moon_design/src/theme/effects/focus_effects.dart'; -import 'package:moon_design/src/theme/effects/hover_effects.dart'; - -@immutable -class MoonEffects extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonEffects( - controlFocusEffect: MoonFocusEffects.lightFocusEffect, - controlHoverEffect: MoonHoverEffects.lightHoverEffect, - controlPulseEffect: MoonControlsEffects.controlPulseEffect, - controlScaleEffect: MoonControlsEffects.controlScaleEffect, - ); - - static final dark = MoonEffects( - controlFocusEffect: MoonFocusEffects.darkFocusEffect, - controlHoverEffect: MoonHoverEffects.darkHoverEffect, - controlPulseEffect: MoonControlsEffects.controlPulseEffect, - controlScaleEffect: MoonControlsEffects.controlScaleEffect, - ); - - /// Control widgets focus effect. - final MoonFocusEffects controlFocusEffect; - - /// Control widgets hover effect. - final MoonHoverEffects controlHoverEffect; - - /// Control widgets focus effect. - final MoonControlsEffects controlPulseEffect; - - /// Control widgets scale effect. - final MoonControlsEffects controlScaleEffect; - - const MoonEffects({ - required this.controlFocusEffect, - required this.controlHoverEffect, - required this.controlPulseEffect, - required this.controlScaleEffect, - }); - - @override - MoonEffects copyWith({ - MoonFocusEffects? controlFocusEffect, - MoonHoverEffects? controlHoverEffect, - MoonControlsEffects? controlPulseEffect, - MoonControlsEffects? controlScaleEffect, - }) { - return MoonEffects( - controlFocusEffect: controlFocusEffect ?? this.controlFocusEffect, - controlHoverEffect: controlHoverEffect ?? this.controlHoverEffect, - controlPulseEffect: controlPulseEffect ?? this.controlPulseEffect, - controlScaleEffect: controlScaleEffect ?? this.controlScaleEffect, - ); - } - - @override - MoonEffects lerp(ThemeExtension? other, double t) { - if (other is! MoonEffects) return this; - - return MoonEffects( - controlFocusEffect: controlFocusEffect.lerp(other.controlFocusEffect, t), - controlHoverEffect: controlHoverEffect.lerp(other.controlHoverEffect, t), - controlScaleEffect: controlScaleEffect.lerp(other.controlScaleEffect, t), - controlPulseEffect: controlPulseEffect.lerp(other.controlPulseEffect, t), - - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty("type", "MoonEffects")) - ..add(DiagnosticsProperty("controlScaleEffect", controlScaleEffect)) - ..add(DiagnosticsProperty("controlPulseEffect", controlPulseEffect)) - ..add(DiagnosticsProperty("controlFocusEffect", controlFocusEffect)) - ..add(DiagnosticsProperty("controlHoverEffect", controlHoverEffect)); - } -} diff --git a/lib/src/theme/effects/effects_theme.dart b/lib/src/theme/effects/effects_theme.dart new file mode 100644 index 00000000..d4314d70 --- /dev/null +++ b/lib/src/theme/effects/effects_theme.dart @@ -0,0 +1,101 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import 'package:moon_design/moon_design.dart'; + +import 'package:moon_design/src/theme/effects/controls_effects.dart'; +import 'package:moon_design/src/theme/effects/focus_effects.dart'; +import 'package:moon_design/src/theme/effects/hover_effects.dart'; + +@immutable +class MoonEffectsTheme extends ThemeExtension with DiagnosticableTreeMixin { + /// MDS tokens. + final MoonTokens tokens; + + /// Control widgets focus effect. + final MoonFocusEffects controlFocusEffect; + + /// Control widgets hover effect. + final MoonHoverEffects controlHoverEffect; + + /// Control widgets focus effect. + final MoonControlsEffects controlPulseEffect; + + /// Control widgets scale effect. + final MoonControlsEffects controlScaleEffect; + + MoonEffectsTheme({ + required this.tokens, + MoonFocusEffects? controlFocusEffect, + MoonHoverEffects? controlHoverEffect, + MoonControlsEffects? controlPulseEffect, + MoonControlsEffects? controlScaleEffect, + }) : controlFocusEffect = controlFocusEffect ?? + MoonFocusEffects( + effectColor: tokens.colors.bulma.withOpacity(0.25), + effectExtent: 4, + effectDuration: tokens.transitions.defaultTransitionDuration, + effectCurve: tokens.transitions.defaultTransitionCurve, + ), + controlHoverEffect = controlHoverEffect ?? + MoonHoverEffects( + primaryHoverColor: tokens.colors.heles, + secondaryHoverColor: tokens.colors.jiren, + hoverDuration: tokens.transitions.defaultTransitionDuration, + hoverCurve: tokens.transitions.defaultTransitionCurve, + ), + controlPulseEffect = controlPulseEffect ?? + MoonControlsEffects( + effectColor: tokens.colors.piccolo, + effectDuration: const Duration(milliseconds: 1400), + effectCurve: tokens.transitions.defaultTransitionCurve, + effectExtent: 24, + ), + controlScaleEffect = controlScaleEffect ?? + MoonControlsEffects( + effectDuration: tokens.transitions.defaultTransitionDuration, + effectCurve: tokens.transitions.defaultTransitionCurve, + effectScalar: 0.95, + ); + + @override + MoonEffectsTheme copyWith({ + MoonTokens? tokens, + MoonFocusEffects? controlFocusEffect, + MoonHoverEffects? controlHoverEffect, + MoonControlsEffects? controlPulseEffect, + MoonControlsEffects? controlScaleEffect, + }) { + return MoonEffectsTheme( + tokens: tokens ?? this.tokens, + controlFocusEffect: controlFocusEffect ?? this.controlFocusEffect, + controlHoverEffect: controlHoverEffect ?? this.controlHoverEffect, + controlPulseEffect: controlPulseEffect ?? this.controlPulseEffect, + controlScaleEffect: controlScaleEffect ?? this.controlScaleEffect, + ); + } + + @override + MoonEffectsTheme lerp(ThemeExtension? other, double t) { + if (other is! MoonEffectsTheme) return this; + + return MoonEffectsTheme( + tokens: tokens.lerp(other.tokens, t), + controlFocusEffect: controlFocusEffect.lerp(other.controlFocusEffect, t), + controlHoverEffect: controlHoverEffect.lerp(other.controlHoverEffect, t), + controlScaleEffect: controlScaleEffect.lerp(other.controlScaleEffect, t), + controlPulseEffect: controlPulseEffect.lerp(other.controlPulseEffect, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonEffectsTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) + ..add(DiagnosticsProperty("controlScaleEffect", controlScaleEffect)) + ..add(DiagnosticsProperty("controlPulseEffect", controlPulseEffect)) + ..add(DiagnosticsProperty("controlFocusEffect", controlFocusEffect)) + ..add(DiagnosticsProperty("controlHoverEffect", controlHoverEffect)); + } +} diff --git a/lib/src/theme/effects/focus_effects.dart b/lib/src/theme/effects/focus_effects.dart index 7eb3e55c..56367635 100644 --- a/lib/src/theme/effects/focus_effects.dart +++ b/lib/src/theme/effects/focus_effects.dart @@ -7,20 +7,6 @@ import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonFocusEffects extends ThemeExtension with DiagnosticableTreeMixin { - static const lightFocusEffect = MoonFocusEffects( - effectColor: Colors.black26, - effectExtent: 4, - effectDuration: Duration(milliseconds: 150), - effectCurve: Curves.easeInOutCubic, - ); - - static const darkFocusEffect = MoonFocusEffects( - effectColor: Colors.white24, - effectExtent: 4, - effectDuration: Duration(milliseconds: 150), - effectCurve: Curves.easeInOutCubic, - ); - /// Focus effect color. final Color effectColor; diff --git a/lib/src/theme/effects/hover_effects.dart b/lib/src/theme/effects/hover_effects.dart index 3a398501..236e6e68 100644 --- a/lib/src/theme/effects/hover_effects.dart +++ b/lib/src/theme/effects/hover_effects.dart @@ -1,24 +1,10 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; + import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonHoverEffects extends ThemeExtension with DiagnosticableTreeMixin { - static final lightHoverEffect = MoonHoverEffects( - primaryHoverColor: MoonColors.light.heles, - secondaryHoverColor: MoonColors.light.jiren, - hoverDuration: const Duration(milliseconds: 150), - hoverCurve: Curves.easeInOutCubic, - ); - - static final darkHoverEffect = MoonHoverEffects( - primaryHoverColor: MoonColors.dark.heles, - secondaryHoverColor: MoonColors.dark.jiren, - hoverDuration: const Duration(milliseconds: 150), - hoverCurve: Curves.easeInOutCubic, - ); - /// Primary hover effect color. final Color primaryHoverColor; diff --git a/lib/src/theme/icons/icon_colors.dart b/lib/src/theme/icons/icon_colors.dart deleted file mode 100644 index f2077796..00000000 --- a/lib/src/theme/icons/icon_colors.dart +++ /dev/null @@ -1,49 +0,0 @@ -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 deleted file mode 100644 index a976087e..00000000 --- a/lib/src/theme/icons/icon_theme.dart +++ /dev/null @@ -1,48 +0,0 @@ -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/loaders/circular_loader/circular_loader_colors.dart b/lib/src/theme/loaders/circular_loader/circular_loader_colors.dart index 293327a3..ad921d82 100644 --- a/lib/src/theme/loaders/circular_loader/circular_loader_colors.dart +++ b/lib/src/theme/loaders/circular_loader/circular_loader_colors.dart @@ -1,21 +1,10 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonCircularLoaderColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonCircularLoaderColors( - color: MoonColors.light.hit, - backgroundColor: Colors.transparent, - ); - - static final dark = MoonCircularLoaderColors( - color: MoonColors.dark.hit, - backgroundColor: Colors.transparent, - ); - /// Circular loader color. final Color color; diff --git a/lib/src/theme/loaders/circular_loader/circular_loader_size_properties.dart b/lib/src/theme/loaders/circular_loader/circular_loader_size_properties.dart index 4d917cf6..5aed983e 100644 --- a/lib/src/theme/loaders/circular_loader/circular_loader_size_properties.dart +++ b/lib/src/theme/loaders/circular_loader/circular_loader_size_properties.dart @@ -3,36 +3,9 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/sizes.dart'; - @immutable class MoonCircularLoaderSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final x2s = MoonCircularLoaderSizeProperties( - loaderSizeValue: MoonSizes.sizes.x2s, - loaderStrokeWidth: MoonSizes.sizes.x6s, - ); - - static final xs = MoonCircularLoaderSizeProperties( - loaderSizeValue: MoonSizes.sizes.xs, - loaderStrokeWidth: MoonSizes.sizes.x6s, - ); - - static final sm = MoonCircularLoaderSizeProperties( - loaderSizeValue: MoonSizes.sizes.sm, - loaderStrokeWidth: MoonSizes.sizes.x6s, - ); - - static final md = MoonCircularLoaderSizeProperties( - loaderSizeValue: MoonSizes.sizes.md, - loaderStrokeWidth: MoonSizes.sizes.x5s, - ); - - static final lg = MoonCircularLoaderSizeProperties( - loaderSizeValue: MoonSizes.sizes.lg, - loaderStrokeWidth: MoonSizes.sizes.x5s, - ); - /// Circular loader size value. final double loaderSizeValue; diff --git a/lib/src/theme/loaders/circular_loader/circular_loader_sizes.dart b/lib/src/theme/loaders/circular_loader/circular_loader_sizes.dart index 45ca5008..8b02c0f8 100644 --- a/lib/src/theme/loaders/circular_loader/circular_loader_sizes.dart +++ b/lib/src/theme/loaders/circular_loader/circular_loader_sizes.dart @@ -2,16 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCircularLoaderSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonCircularLoaderSizes( - x2s: MoonCircularLoaderSizeProperties.x2s, - xs: MoonCircularLoaderSizeProperties.xs, - sm: MoonCircularLoaderSizeProperties.sm, - md: MoonCircularLoaderSizeProperties.md, - lg: MoonCircularLoaderSizeProperties.lg, - ); + /// MDS tokens. + final MoonTokens tokens; /// (2x) Extra small circular loader properties. final MoonCircularLoaderSizeProperties x2s; @@ -28,16 +24,42 @@ class MoonCircularLoaderSizes extends ThemeExtension wi /// Large circular loader properties. final MoonCircularLoaderSizeProperties lg; - const MoonCircularLoaderSizes({ - required this.x2s, - required this.xs, - required this.sm, - required this.md, - required this.lg, - }); + MoonCircularLoaderSizes({ + required this.tokens, + MoonCircularLoaderSizeProperties? x2s, + MoonCircularLoaderSizeProperties? xs, + MoonCircularLoaderSizeProperties? sm, + MoonCircularLoaderSizeProperties? md, + MoonCircularLoaderSizeProperties? lg, + }) : x2s = x2s ?? + MoonCircularLoaderSizeProperties( + loaderSizeValue: tokens.sizes.x2s, + loaderStrokeWidth: tokens.sizes.x6s, + ), + xs = xs ?? + MoonCircularLoaderSizeProperties( + loaderSizeValue: tokens.sizes.xs, + loaderStrokeWidth: tokens.sizes.x6s, + ), + sm = sm ?? + MoonCircularLoaderSizeProperties( + loaderSizeValue: tokens.sizes.sm, + loaderStrokeWidth: tokens.sizes.x6s, + ), + md = md ?? + MoonCircularLoaderSizeProperties( + loaderSizeValue: tokens.sizes.md, + loaderStrokeWidth: tokens.sizes.x5s, + ), + lg = lg ?? + MoonCircularLoaderSizeProperties( + loaderSizeValue: tokens.sizes.lg, + loaderStrokeWidth: tokens.sizes.x5s, + ); @override MoonCircularLoaderSizes copyWith({ + MoonTokens? tokens, MoonCircularLoaderSizeProperties? x2s, MoonCircularLoaderSizeProperties? xs, MoonCircularLoaderSizeProperties? sm, @@ -45,6 +67,7 @@ class MoonCircularLoaderSizes extends ThemeExtension wi MoonCircularLoaderSizeProperties? lg, }) { return MoonCircularLoaderSizes( + tokens: tokens ?? this.tokens, x2s: x2s ?? this.x2s, xs: xs ?? this.xs, sm: sm ?? this.sm, @@ -58,6 +81,7 @@ class MoonCircularLoaderSizes extends ThemeExtension wi if (other is! MoonCircularLoaderSizes) return this; return MoonCircularLoaderSizes( + tokens: tokens.lerp(other.tokens, t), x2s: x2s.lerp(other.x2s, t), xs: xs.lerp(other.xs, t), sm: sm.lerp(other.sm, t), @@ -71,6 +95,7 @@ class MoonCircularLoaderSizes extends ThemeExtension wi super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCircularLoaderSizes")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("x2s", x2s)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)) diff --git a/lib/src/theme/loaders/circular_loader/circular_loader_theme.dart b/lib/src/theme/loaders/circular_loader/circular_loader_theme.dart index 6dec90a2..55d459ef 100644 --- a/lib/src/theme/loaders/circular_loader/circular_loader_theme.dart +++ b/lib/src/theme/loaders/circular_loader/circular_loader_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_colors.dart'; import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCircularLoaderTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonCircularLoaderTheme( - colors: MoonCircularLoaderColors.light, - sizes: MoonCircularLoaderSizes.sizes, - ); - - static final dark = MoonCircularLoaderTheme( - colors: MoonCircularLoaderColors.dark, - sizes: MoonCircularLoaderSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// Circular loader colors. final MoonCircularLoaderColors colors; @@ -22,17 +16,25 @@ class MoonCircularLoaderTheme extends ThemeExtension wi /// Circular loader sizes. final MoonCircularLoaderSizes sizes; - const MoonCircularLoaderTheme({ - required this.colors, - required this.sizes, - }); + MoonCircularLoaderTheme({ + required this.tokens, + MoonCircularLoaderColors? colors, + MoonCircularLoaderSizes? sizes, + }) : colors = colors ?? + MoonCircularLoaderColors( + color: tokens.colors.hit, + backgroundColor: Colors.transparent, + ), + sizes = sizes ?? MoonCircularLoaderSizes(tokens: tokens); @override MoonCircularLoaderTheme copyWith({ + MoonTokens? tokens, MoonCircularLoaderColors? colors, MoonCircularLoaderSizes? sizes, }) { return MoonCircularLoaderTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); @@ -43,6 +45,7 @@ class MoonCircularLoaderTheme extends ThemeExtension wi if (other is! MoonCircularLoaderTheme) return this; return MoonCircularLoaderTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); diff --git a/lib/src/theme/loaders/linear_loader/linear_loader_colors.dart b/lib/src/theme/loaders/linear_loader/linear_loader_colors.dart index 4d2213c6..f08be331 100644 --- a/lib/src/theme/loaders/linear_loader/linear_loader_colors.dart +++ b/lib/src/theme/loaders/linear_loader/linear_loader_colors.dart @@ -1,21 +1,10 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonLinearLoaderColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonLinearLoaderColors( - color: MoonColors.light.hit, - backgroundColor: Colors.transparent, - ); - - static final dark = MoonLinearLoaderColors( - color: MoonColors.dark.hit, - backgroundColor: Colors.transparent, - ); - /// Linear loader color. final Color color; diff --git a/lib/src/theme/loaders/linear_loader/linear_loader_size_properties.dart b/lib/src/theme/loaders/linear_loader/linear_loader_size_properties.dart index 06b62070..0fbb7682 100644 --- a/lib/src/theme/loaders/linear_loader/linear_loader_size_properties.dart +++ b/lib/src/theme/loaders/linear_loader/linear_loader_size_properties.dart @@ -3,37 +3,9 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; - @immutable class MoonLinearLoaderSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final x6s = MoonLinearLoaderSizeProperties( - borderRadius: MoonBorders.borders.surfaceXs, - loaderHeight: MoonSizes.sizes.x6s, - ); - - static final x5s = MoonLinearLoaderSizeProperties( - borderRadius: MoonBorders.borders.surfaceXs, - loaderHeight: MoonSizes.sizes.x5s, - ); - - static final x4s = MoonLinearLoaderSizeProperties( - borderRadius: MoonBorders.borders.surfaceSm, - loaderHeight: MoonSizes.sizes.x4s, - ); - - static final x3s = MoonLinearLoaderSizeProperties( - borderRadius: MoonBorders.borders.surfaceMd, - loaderHeight: MoonSizes.sizes.x3s, - ); - - static final x2s = MoonLinearLoaderSizeProperties( - borderRadius: MoonBorders.borders.surfaceLg, - loaderHeight: MoonSizes.sizes.x2s, - ); - /// Linear loader border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/loaders/linear_loader/linear_loader_sizes.dart b/lib/src/theme/loaders/linear_loader/linear_loader_sizes.dart index 682f2bd0..d334c0da 100644 --- a/lib/src/theme/loaders/linear_loader/linear_loader_sizes.dart +++ b/lib/src/theme/loaders/linear_loader/linear_loader_sizes.dart @@ -2,16 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonLinearLoaderSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonLinearLoaderSizes( - x6s: MoonLinearLoaderSizeProperties.x6s, - x5s: MoonLinearLoaderSizeProperties.x5s, - x4s: MoonLinearLoaderSizeProperties.x4s, - x3s: MoonLinearLoaderSizeProperties.x3s, - x2s: MoonLinearLoaderSizeProperties.x2s, - ); + /// MDS tokens. + final MoonTokens tokens; /// (6x) Extra small linear loader properties. final MoonLinearLoaderSizeProperties x6s; @@ -28,16 +24,42 @@ class MoonLinearLoaderSizes extends ThemeExtension with D /// (2x) Extra small linear loader properties. final MoonLinearLoaderSizeProperties x2s; - const MoonLinearLoaderSizes({ - required this.x6s, - required this.x5s, - required this.x4s, - required this.x3s, - required this.x2s, - }); + MoonLinearLoaderSizes({ + required this.tokens, + MoonLinearLoaderSizeProperties? x6s, + MoonLinearLoaderSizeProperties? x5s, + MoonLinearLoaderSizeProperties? x4s, + MoonLinearLoaderSizeProperties? x3s, + MoonLinearLoaderSizeProperties? x2s, + }) : x6s = x6s ?? + MoonLinearLoaderSizeProperties( + borderRadius: tokens.borders.surfaceXs, + loaderHeight: tokens.sizes.x6s, + ), + x5s = x5s ?? + MoonLinearLoaderSizeProperties( + borderRadius: tokens.borders.surfaceXs, + loaderHeight: tokens.sizes.x5s, + ), + x4s = x4s ?? + MoonLinearLoaderSizeProperties( + borderRadius: tokens.borders.surfaceSm, + loaderHeight: tokens.sizes.x4s, + ), + x3s = x3s ?? + MoonLinearLoaderSizeProperties( + borderRadius: tokens.borders.surfaceMd, + loaderHeight: tokens.sizes.x3s, + ), + x2s = x2s ?? + MoonLinearLoaderSizeProperties( + borderRadius: tokens.borders.surfaceLg, + loaderHeight: tokens.sizes.x2s, + ); @override MoonLinearLoaderSizes copyWith({ + MoonTokens? tokens, MoonLinearLoaderSizeProperties? x6s, MoonLinearLoaderSizeProperties? x5s, MoonLinearLoaderSizeProperties? x4s, @@ -45,6 +67,7 @@ class MoonLinearLoaderSizes extends ThemeExtension with D MoonLinearLoaderSizeProperties? x2s, }) { return MoonLinearLoaderSizes( + tokens: tokens ?? this.tokens, x6s: x6s ?? this.x6s, x5s: x5s ?? this.x5s, x4s: x4s ?? this.x4s, @@ -58,6 +81,7 @@ class MoonLinearLoaderSizes extends ThemeExtension with D if (other is! MoonLinearLoaderSizes) return this; return MoonLinearLoaderSizes( + tokens: tokens.lerp(other.tokens, t), x6s: x6s.lerp(other.x6s, t), x5s: x5s.lerp(other.x5s, t), x4s: x4s.lerp(other.x4s, t), @@ -71,6 +95,7 @@ class MoonLinearLoaderSizes extends ThemeExtension with D super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonLinearLoaderSizes")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("x6s", x6s)) ..add(DiagnosticsProperty("x5s", x5s)) ..add(DiagnosticsProperty("x4s", x4s)) diff --git a/lib/src/theme/loaders/linear_loader/linear_loader_theme.dart b/lib/src/theme/loaders/linear_loader/linear_loader_theme.dart index 0cdd3909..eb85df9c 100644 --- a/lib/src/theme/loaders/linear_loader/linear_loader_theme.dart +++ b/lib/src/theme/loaders/linear_loader/linear_loader_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_colors.dart'; import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonLinearLoaderTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonLinearLoaderTheme( - colors: MoonLinearLoaderColors.light, - sizes: MoonLinearLoaderSizes.sizes, - ); - - static final dark = MoonLinearLoaderTheme( - colors: MoonLinearLoaderColors.dark, - sizes: MoonLinearLoaderSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// Circular loader colors. final MoonLinearLoaderColors colors; @@ -22,17 +16,25 @@ class MoonLinearLoaderTheme extends ThemeExtension with D /// Circular loader sizes. final MoonLinearLoaderSizes sizes; - const MoonLinearLoaderTheme({ - required this.colors, - required this.sizes, - }); + MoonLinearLoaderTheme({ + required this.tokens, + MoonLinearLoaderColors? colors, + MoonLinearLoaderSizes? sizes, + }) : colors = colors ?? + MoonLinearLoaderColors( + color: tokens.colors.hit, + backgroundColor: Colors.transparent, + ), + sizes = sizes ?? MoonLinearLoaderSizes(tokens: tokens); @override MoonLinearLoaderTheme copyWith({ + MoonTokens? tokens, MoonLinearLoaderColors? colors, MoonLinearLoaderSizes? sizes, }) { return MoonLinearLoaderTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); @@ -43,6 +45,7 @@ class MoonLinearLoaderTheme extends ThemeExtension with D if (other is! MoonLinearLoaderTheme) return this; return MoonLinearLoaderTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); @@ -53,6 +56,7 @@ class MoonLinearLoaderTheme extends ThemeExtension with D super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonLinearLoaderTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } diff --git a/lib/src/theme/modal/modal_colors.dart b/lib/src/theme/modal/modal_colors.dart index 04a66504..1b95df7c 100644 --- a/lib/src/theme/modal/modal_colors.dart +++ b/lib/src/theme/modal/modal_colors.dart @@ -1,27 +1,10 @@ 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; diff --git a/lib/src/theme/modal/modal_properties.dart b/lib/src/theme/modal/modal_properties.dart index a8c7c840..ee3a60c9 100644 --- a/lib/src/theme/modal/modal_properties.dart +++ b/lib/src/theme/modal/modal_properties.dart @@ -1,18 +1,8 @@ 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 { - static final properties = MoonModalProperties( - borderRadius: MoonBorders.borders.surfaceSm, - transitionDuration: const Duration(milliseconds: 200), - transitionCurve: Curves.easeInOutCubic, - textStyle: MoonTextStyles.body.textDefault, - ); - /// Modal border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/modal/modal_theme.dart b/lib/src/theme/modal/modal_theme.dart index 2357ad34..26a0c128 100644 --- a/lib/src/theme/modal/modal_theme.dart +++ b/lib/src/theme/modal/modal_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/modal/modal_colors.dart'; import 'package:moon_design/src/theme/modal/modal_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonModalTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonModalTheme( - colors: MoonModalColors.light, - properties: MoonModalProperties.properties, - ); - - static final dark = MoonModalTheme( - colors: MoonModalColors.dark, - properties: MoonModalProperties.properties, - ); + /// MDS tokens. + final MoonTokens tokens; /// Modal colors. final MoonModalColors colors; @@ -22,17 +16,33 @@ class MoonModalTheme extends ThemeExtension with DiagnosticableT /// Modal properties. final MoonModalProperties properties; - const MoonModalTheme({ - required this.colors, - required this.properties, - }); + MoonModalTheme({ + required this.tokens, + MoonModalColors? colors, + MoonModalProperties? properties, + }) : colors = colors ?? + MoonModalColors( + textColor: tokens.colors.textPrimary, + iconColor: tokens.colors.iconPrimary, + backgroundColor: tokens.colors.gohan, + barrierColor: tokens.colors.zeno, + ), + properties = properties ?? + MoonModalProperties( + borderRadius: tokens.borders.surfaceSm, + transitionDuration: tokens.transitions.defaultTransitionDuration, + transitionCurve: tokens.transitions.defaultTransitionCurve, + textStyle: tokens.typography.body.textDefault, + ); @override MoonModalTheme copyWith({ + MoonTokens? tokens, MoonModalColors? colors, MoonModalProperties? properties, }) { return MoonModalTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); @@ -43,6 +53,7 @@ class MoonModalTheme extends ThemeExtension with DiagnosticableT if (other is! MoonModalTheme) return this; return MoonModalTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); @@ -53,6 +64,7 @@ class MoonModalTheme extends ThemeExtension with DiagnosticableT super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonModalTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)); } diff --git a/lib/src/theme/popover/popover_colors.dart b/lib/src/theme/popover/popover_colors.dart index 0a92b156..8204ba14 100644 --- a/lib/src/theme/popover/popover_colors.dart +++ b/lib/src/theme/popover/popover_colors.dart @@ -1,25 +1,10 @@ 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; diff --git a/lib/src/theme/popover/popover_properties.dart b/lib/src/theme/popover/popover_properties.dart index 213bf52b..d059b7af 100644 --- a/lib/src/theme/popover/popover_properties.dart +++ b/lib/src/theme/popover/popover_properties.dart @@ -3,21 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonPopoverProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonPopoverProperties( - borderRadius: MoonBorders.borders.interactiveMd, - distanceToTarget: MoonSizes.sizes.x4s, - transitionDuration: const Duration(milliseconds: 150), - transitionCurve: Curves.easeInOutCubic, - contentPadding: EdgeInsets.all(MoonSizes.sizes.x3s), - textStyle: MoonTextStyles.body.textDefault, - ); - /// Popover border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/popover/popover_shadows.dart b/lib/src/theme/popover/popover_shadows.dart index b672f014..eb1eeb2a 100644 --- a/lib/src/theme/popover/popover_shadows.dart +++ b/lib/src/theme/popover/popover_shadows.dart @@ -1,18 +1,8 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/shadows.dart'; - @immutable class MoonPopoverShadows extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonPopoverShadows( - popoverShadows: MoonShadows.light.sm, - ); - - static final dark = MoonPopoverShadows( - popoverShadows: MoonShadows.dark.sm, - ); - /// Popover shadows. final List popoverShadows; diff --git a/lib/src/theme/popover/popover_theme.dart b/lib/src/theme/popover/popover_theme.dart index 92ef0499..14094b5d 100644 --- a/lib/src/theme/popover/popover_theme.dart +++ b/lib/src/theme/popover/popover_theme.dart @@ -4,20 +4,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/popover/popover_colors.dart'; import 'package:moon_design/src/theme/popover/popover_properties.dart'; import 'package:moon_design/src/theme/popover/popover_shadows.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonPopoverTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonPopoverTheme( - colors: MoonPopoverColors.light, - properties: MoonPopoverProperties.properties, - shadows: MoonPopoverShadows.light, - ); - - static final dark = MoonPopoverTheme( - colors: MoonPopoverColors.dark, - properties: MoonPopoverProperties.properties, - shadows: MoonPopoverShadows.dark, - ); + /// MDS tokens. + final MoonTokens tokens; /// Popover colors. final MoonPopoverColors colors; @@ -28,19 +20,37 @@ class MoonPopoverTheme extends ThemeExtension with Diagnostica /// Popover shadows. final MoonPopoverShadows shadows; - const MoonPopoverTheme({ - required this.colors, - required this.properties, - required this.shadows, - }); + MoonPopoverTheme({ + required this.tokens, + MoonPopoverColors? colors, + MoonPopoverProperties? properties, + MoonPopoverShadows? shadows, + }) : colors = colors ?? + MoonPopoverColors( + textColor: tokens.colors.textPrimary, + iconColor: tokens.colors.iconPrimary, + backgroundColor: tokens.colors.gohan, + ), + properties = properties ?? + MoonPopoverProperties( + borderRadius: tokens.borders.interactiveMd, + distanceToTarget: tokens.sizes.x4s, + transitionDuration: tokens.transitions.defaultTransitionDuration, + transitionCurve: tokens.transitions.defaultTransitionCurve, + contentPadding: EdgeInsets.all(tokens.sizes.x3s), + textStyle: tokens.typography.body.textDefault, + ), + shadows = shadows ?? MoonPopoverShadows(popoverShadows: tokens.shadows.sm); @override MoonPopoverTheme copyWith({ + MoonTokens? tokens, MoonPopoverColors? colors, MoonPopoverProperties? properties, MoonPopoverShadows? shadows, }) { return MoonPopoverTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, @@ -52,6 +62,7 @@ class MoonPopoverTheme extends ThemeExtension with Diagnostica if (other is! MoonPopoverTheme) return this; return MoonPopoverTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), @@ -63,6 +74,7 @@ class MoonPopoverTheme extends ThemeExtension with Diagnostica super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonPopoverTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("shadows", shadows)); diff --git a/lib/src/theme/progress/circular_progress/circular_progress_colors.dart b/lib/src/theme/progress/circular_progress/circular_progress_colors.dart index 71d9476f..d376cec7 100644 --- a/lib/src/theme/progress/circular_progress/circular_progress_colors.dart +++ b/lib/src/theme/progress/circular_progress/circular_progress_colors.dart @@ -1,21 +1,10 @@ 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 MoonCircularProgressColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonCircularProgressColors( - color: MoonColors.light.piccolo, - backgroundColor: MoonColors.light.trunks, - ); - - static final dark = MoonCircularProgressColors( - color: MoonColors.dark.piccolo, - backgroundColor: MoonColors.dark.trunks, - ); - /// Circular progress color. final Color color; diff --git a/lib/src/theme/progress/circular_progress/circular_progress_size_properties.dart b/lib/src/theme/progress/circular_progress/circular_progress_size_properties.dart index f6c10989..fe064b41 100644 --- a/lib/src/theme/progress/circular_progress/circular_progress_size_properties.dart +++ b/lib/src/theme/progress/circular_progress/circular_progress_size_properties.dart @@ -3,36 +3,9 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/sizes.dart'; - @immutable class MoonCircularProgressSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final x2s = MoonCircularProgressSizeProperties( - progressSizeValue: MoonSizes.sizes.x2s, - progressStrokeWidth: MoonSizes.sizes.x6s, - ); - - static final xs = MoonCircularProgressSizeProperties( - progressSizeValue: MoonSizes.sizes.xs, - progressStrokeWidth: MoonSizes.sizes.x6s, - ); - - static final sm = MoonCircularProgressSizeProperties( - progressSizeValue: MoonSizes.sizes.sm, - progressStrokeWidth: MoonSizes.sizes.x6s, - ); - - static final md = MoonCircularProgressSizeProperties( - progressSizeValue: MoonSizes.sizes.md, - progressStrokeWidth: MoonSizes.sizes.x5s, - ); - - static final lg = MoonCircularProgressSizeProperties( - progressSizeValue: MoonSizes.sizes.lg, - progressStrokeWidth: MoonSizes.sizes.x5s, - ); - /// Circular progress size value. final double progressSizeValue; diff --git a/lib/src/theme/progress/circular_progress/circular_progress_sizes.dart b/lib/src/theme/progress/circular_progress/circular_progress_sizes.dart index 15cf8a07..9b79b2e3 100644 --- a/lib/src/theme/progress/circular_progress/circular_progress_sizes.dart +++ b/lib/src/theme/progress/circular_progress/circular_progress_sizes.dart @@ -2,16 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCircularProgressSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonCircularProgressSizes( - x2s: MoonCircularProgressSizeProperties.x2s, - xs: MoonCircularProgressSizeProperties.xs, - sm: MoonCircularProgressSizeProperties.sm, - md: MoonCircularProgressSizeProperties.md, - lg: MoonCircularProgressSizeProperties.lg, - ); + /// MDS tokens. + final MoonTokens tokens; /// (2x) Extra small circular progress properties. final MoonCircularProgressSizeProperties x2s; @@ -28,16 +24,42 @@ class MoonCircularProgressSizes extends ThemeExtension("tokens", tokens)) ..add(DiagnosticsProperty("x2s", x2s)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)) diff --git a/lib/src/theme/progress/circular_progress/circular_progress_theme.dart b/lib/src/theme/progress/circular_progress/circular_progress_theme.dart index 301809ac..17266645 100644 --- a/lib/src/theme/progress/circular_progress/circular_progress_theme.dart +++ b/lib/src/theme/progress/circular_progress/circular_progress_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_colors.dart'; import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCircularProgressTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonCircularProgressTheme( - colors: MoonCircularProgressColors.light, - sizes: MoonCircularProgressSizes.sizes, - ); - - static final dark = MoonCircularProgressTheme( - colors: MoonCircularProgressColors.dark, - sizes: MoonCircularProgressSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// Circular progress colors. final MoonCircularProgressColors colors; @@ -22,17 +16,25 @@ class MoonCircularProgressTheme extends ThemeExtension("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } diff --git a/lib/src/theme/progress/linear_progress/linear_progress_colors.dart b/lib/src/theme/progress/linear_progress/linear_progress_colors.dart index 52438184..359808a6 100644 --- a/lib/src/theme/progress/linear_progress/linear_progress_colors.dart +++ b/lib/src/theme/progress/linear_progress/linear_progress_colors.dart @@ -1,21 +1,10 @@ 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 MoonLinearProgressColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonLinearProgressColors( - color: MoonColors.light.piccolo, - backgroundColor: MoonColors.light.trunks, - ); - - static final dark = MoonLinearProgressColors( - color: MoonColors.dark.piccolo, - backgroundColor: MoonColors.dark.trunks, - ); - /// Linear progress color. final Color color; diff --git a/lib/src/theme/progress/linear_progress/linear_progress_size_properties.dart b/lib/src/theme/progress/linear_progress/linear_progress_size_properties.dart index bc5bad87..7d39c668 100644 --- a/lib/src/theme/progress/linear_progress/linear_progress_size_properties.dart +++ b/lib/src/theme/progress/linear_progress/linear_progress_size_properties.dart @@ -3,37 +3,9 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; - @immutable class MoonLinearProgressSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final x6s = MoonLinearProgressSizeProperties( - borderRadius: MoonBorders.borders.surfaceXs, - progressHeight: MoonSizes.sizes.x6s, - ); - - static final x5s = MoonLinearProgressSizeProperties( - borderRadius: MoonBorders.borders.surfaceXs, - progressHeight: MoonSizes.sizes.x5s, - ); - - static final x4s = MoonLinearProgressSizeProperties( - borderRadius: MoonBorders.borders.surfaceSm, - progressHeight: MoonSizes.sizes.x4s, - ); - - static final x3s = MoonLinearProgressSizeProperties( - borderRadius: MoonBorders.borders.surfaceMd, - progressHeight: MoonSizes.sizes.x3s, - ); - - static final x2s = MoonLinearProgressSizeProperties( - borderRadius: MoonBorders.borders.surfaceLg, - progressHeight: MoonSizes.sizes.x2s, - ); - /// Linear progress border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/progress/linear_progress/linear_progress_sizes.dart b/lib/src/theme/progress/linear_progress/linear_progress_sizes.dart index 79223293..69957e99 100644 --- a/lib/src/theme/progress/linear_progress/linear_progress_sizes.dart +++ b/lib/src/theme/progress/linear_progress/linear_progress_sizes.dart @@ -2,16 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonLinearProgressSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonLinearProgressSizes( - x6s: MoonLinearProgressSizeProperties.x6s, - x5s: MoonLinearProgressSizeProperties.x5s, - x4s: MoonLinearProgressSizeProperties.x4s, - x3s: MoonLinearProgressSizeProperties.x3s, - x2s: MoonLinearProgressSizeProperties.x2s, - ); + /// MDS tokens. + final MoonTokens tokens; /// (6x) Extra small linear progress properties. final MoonLinearProgressSizeProperties x6s; @@ -28,16 +24,42 @@ class MoonLinearProgressSizes extends ThemeExtension wi /// (2x) Extra small linear progress properties. final MoonLinearProgressSizeProperties x2s; - const MoonLinearProgressSizes({ - required this.x6s, - required this.x5s, - required this.x4s, - required this.x3s, - required this.x2s, - }); + MoonLinearProgressSizes({ + required this.tokens, + MoonLinearProgressSizeProperties? x6s, + MoonLinearProgressSizeProperties? x5s, + MoonLinearProgressSizeProperties? x4s, + MoonLinearProgressSizeProperties? x3s, + MoonLinearProgressSizeProperties? x2s, + }) : x6s = x6s ?? + MoonLinearProgressSizeProperties( + borderRadius: tokens.borders.surfaceXs, + progressHeight: tokens.sizes.x6s, + ), + x5s = x5s ?? + MoonLinearProgressSizeProperties( + borderRadius: tokens.borders.surfaceXs, + progressHeight: tokens.sizes.x5s, + ), + x4s = x4s ?? + MoonLinearProgressSizeProperties( + borderRadius: tokens.borders.surfaceSm, + progressHeight: tokens.sizes.x4s, + ), + x3s = x3s ?? + MoonLinearProgressSizeProperties( + borderRadius: tokens.borders.surfaceMd, + progressHeight: tokens.sizes.x3s, + ), + x2s = x2s ?? + MoonLinearProgressSizeProperties( + borderRadius: tokens.borders.surfaceLg, + progressHeight: tokens.sizes.x2s, + ); @override MoonLinearProgressSizes copyWith({ + MoonTokens? tokens, MoonLinearProgressSizeProperties? x6s, MoonLinearProgressSizeProperties? x5s, MoonLinearProgressSizeProperties? x4s, @@ -45,6 +67,7 @@ class MoonLinearProgressSizes extends ThemeExtension wi MoonLinearProgressSizeProperties? x2s, }) { return MoonLinearProgressSizes( + tokens: tokens ?? this.tokens, x6s: x6s ?? this.x6s, x5s: x5s ?? this.x5s, x4s: x4s ?? this.x4s, @@ -58,6 +81,7 @@ class MoonLinearProgressSizes extends ThemeExtension wi if (other is! MoonLinearProgressSizes) return this; return MoonLinearProgressSizes( + tokens: tokens.lerp(other.tokens, t), x6s: x6s.lerp(other.x6s, t), x5s: x5s.lerp(other.x5s, t), x4s: x4s.lerp(other.x4s, t), @@ -71,6 +95,7 @@ class MoonLinearProgressSizes extends ThemeExtension wi super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonLinearProgressSizes")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("x6s", x6s)) ..add(DiagnosticsProperty("x5s", x5s)) ..add(DiagnosticsProperty("x4s", x4s)) diff --git a/lib/src/theme/progress/linear_progress/linear_progress_theme.dart b/lib/src/theme/progress/linear_progress/linear_progress_theme.dart index 769c60dc..e7095fdd 100644 --- a/lib/src/theme/progress/linear_progress/linear_progress_theme.dart +++ b/lib/src/theme/progress/linear_progress/linear_progress_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_colors.dart'; import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonLinearProgressTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonLinearProgressTheme( - colors: MoonLinearProgressColors.light, - sizes: MoonLinearProgressSizes.sizes, - ); - - static final dark = MoonLinearProgressTheme( - colors: MoonLinearProgressColors.dark, - sizes: MoonLinearProgressSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// Linear progress colors. final MoonLinearProgressColors colors; @@ -22,17 +16,25 @@ class MoonLinearProgressTheme extends ThemeExtension wi /// Linear progress sizes. final MoonLinearProgressSizes sizes; - const MoonLinearProgressTheme({ - required this.colors, - required this.sizes, - }); + MoonLinearProgressTheme({ + required this.tokens, + MoonLinearProgressColors? colors, + MoonLinearProgressSizes? sizes, + }) : colors = colors ?? + MoonLinearProgressColors( + color: tokens.colors.piccolo, + backgroundColor: tokens.colors.trunks, + ), + sizes = sizes ?? MoonLinearProgressSizes(tokens: tokens); @override MoonLinearProgressTheme copyWith({ + MoonTokens? tokens, MoonLinearProgressColors? colors, MoonLinearProgressSizes? sizes, }) { return MoonLinearProgressTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); @@ -43,6 +45,7 @@ class MoonLinearProgressTheme extends ThemeExtension wi if (other is! MoonLinearProgressTheme) return this; return MoonLinearProgressTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); @@ -53,6 +56,7 @@ class MoonLinearProgressTheme extends ThemeExtension wi super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonLinearProgressTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } diff --git a/lib/src/theme/radio/radio_colors.dart b/lib/src/theme/radio/radio_colors.dart index 0b9dc456..d792dceb 100644 --- a/lib/src/theme/radio/radio_colors.dart +++ b/lib/src/theme/radio/radio_colors.dart @@ -1,24 +1,10 @@ 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 class MoonRadioColors extends ThemeExtension with DiagnosticableTreeMixin { - 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. final Color activeColor; diff --git a/lib/src/theme/radio/radio_properties.dart b/lib/src/theme/radio/radio_properties.dart index 628e654c..ef913427 100644 --- a/lib/src/theme/radio/radio_properties.dart +++ b/lib/src/theme/radio/radio_properties.dart @@ -1,14 +1,8 @@ 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; diff --git a/lib/src/theme/radio/radio_theme.dart b/lib/src/theme/radio/radio_theme.dart index 8fc07962..79080d6c 100644 --- a/lib/src/theme/radio/radio_theme.dart +++ b/lib/src/theme/radio/radio_theme.dart @@ -3,18 +3,12 @@ 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'; +import 'package:moon_design/src/theme/tokens/tokens.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, - ); + /// MDS tokens. + final MoonTokens tokens; /// Radio colors. final MoonRadioColors colors; @@ -22,17 +16,29 @@ class MoonRadioTheme extends ThemeExtension with DiagnosticableT /// Radio properties. final MoonRadioProperties properties; - const MoonRadioTheme({ - required this.colors, - required this.properties, - }); + MoonRadioTheme({ + required this.tokens, + MoonRadioColors? colors, + MoonRadioProperties? properties, + }) : colors = colors ?? + MoonRadioColors( + activeColor: tokens.colors.piccolo, + inactiveColor: tokens.colors.trunks, + textColor: tokens.colors.textPrimary, + ), + properties = properties ?? + MoonRadioProperties( + textStyle: tokens.typography.body.textDefault, + ); @override MoonRadioTheme copyWith({ + MoonTokens? tokens, MoonRadioColors? colors, MoonRadioProperties? properties, }) { return MoonRadioTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); @@ -43,6 +49,7 @@ class MoonRadioTheme extends ThemeExtension with DiagnosticableT if (other is! MoonRadioTheme) return this; return MoonRadioTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); @@ -53,6 +60,7 @@ class MoonRadioTheme extends ThemeExtension with DiagnosticableT super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonRadioTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)); } diff --git a/lib/src/theme/segmented_control/segmented_control_colors.dart b/lib/src/theme/segmented_control/segmented_control_colors.dart index 572913e4..551ad9e6 100644 --- a/lib/src/theme/segmented_control/segmented_control_colors.dart +++ b/lib/src/theme/segmented_control/segmented_control_colors.dart @@ -1,26 +1,10 @@ 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 class MoonSegmentedControlColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonSegmentedControlColors( - backgroundColor: MoonColors.light.goku, - selectedSegmentColor: MoonColors.light.gohan, - textColor: MoonTypography.light.colors.bodyPrimary, - selectedTextColor: MoonTypography.light.colors.bodyPrimary, - ); - - static final dark = MoonSegmentedControlColors( - backgroundColor: MoonColors.dark.goku, - selectedSegmentColor: MoonColors.dark.gohan, - textColor: MoonTypography.dark.colors.bodyPrimary, - selectedTextColor: MoonTypography.dark.colors.bodyPrimary, - ); - /// Background color of SegmentedControl. final Color backgroundColor; diff --git a/lib/src/theme/segmented_control/segmented_control_properties.dart b/lib/src/theme/segmented_control/segmented_control_properties.dart index 34a10916..26a1d356 100644 --- a/lib/src/theme/segmented_control/segmented_control_properties.dart +++ b/lib/src/theme/segmented_control/segmented_control_properties.dart @@ -3,19 +3,9 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/moon_design.dart'; - @immutable class MoonSegmentedControlProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonSegmentedControlProperties( - borderRadius: MoonBorders.borders.interactiveMd, - gap: MoonSizes.sizes.x5s, - transitionDuration: const Duration(milliseconds: 200), - transitionCurve: Curves.easeInOutCubic, - padding: const EdgeInsets.all(4), - ); - /// SegmentedControl border radius. final BorderRadiusGeometry borderRadius; 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 a9dd0534..30f58c43 100644 --- a/lib/src/theme/segmented_control/segmented_control_size_properties.dart +++ b/lib/src/theme/segmented_control/segmented_control_size_properties.dart @@ -3,31 +3,9 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonSegmentedControlSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final sm = MoonSegmentedControlSizeProperties( - segmentBorderRadius: MoonBorders.borders.interactiveSm, - segmentGap: MoonSizes.sizes.x5s, - height: MoonSizes.sizes.md, - iconSizeValue: MoonSizes.sizes.xs, - segmentPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - textStyle: MoonTextStyles.heading.textDefault, - ); - - static final md = MoonSegmentedControlSizeProperties( - segmentBorderRadius: MoonBorders.borders.interactiveSm, - segmentGap: MoonSizes.sizes.x4s, - height: MoonSizes.sizes.lg, - iconSizeValue: MoonSizes.sizes.xs, - segmentPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), - textStyle: MoonTextStyles.heading.textDefault, - ); - /// SegmentedControl segment border radius. final BorderRadiusGeometry segmentBorderRadius; diff --git a/lib/src/theme/segmented_control/segmented_control_sizes.dart b/lib/src/theme/segmented_control/segmented_control_sizes.dart index 1f3f1bdd..d008b229 100644 --- a/lib/src/theme/segmented_control/segmented_control_sizes.dart +++ b/lib/src/theme/segmented_control/segmented_control_sizes.dart @@ -2,13 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonSegmentedControlSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonSegmentedControlSizes( - sm: MoonSegmentedControlSizeProperties.sm, - md: MoonSegmentedControlSizeProperties.md, - ); + /// MDS tokens. + final MoonTokens tokens; /// Small segmentedControl item properties. final MoonSegmentedControlSizeProperties sm; @@ -16,17 +15,37 @@ class MoonSegmentedControlSizes extends ThemeExtension("tokens", tokens)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)); } diff --git a/lib/src/theme/segmented_control/segmented_control_theme.dart b/lib/src/theme/segmented_control/segmented_control_theme.dart index ddde44e2..60657405 100644 --- a/lib/src/theme/segmented_control/segmented_control_theme.dart +++ b/lib/src/theme/segmented_control/segmented_control_theme.dart @@ -4,20 +4,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_colors.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_properties.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonSegmentedControlTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonSegmentedControlTheme( - colors: MoonSegmentedControlColors.light, - properties: MoonSegmentedControlProperties.properties, - sizes: MoonSegmentedControlSizes.sizes, - ); - - static final dark = MoonSegmentedControlTheme( - colors: MoonSegmentedControlColors.dark, - properties: MoonSegmentedControlProperties.properties, - sizes: MoonSegmentedControlSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// SegmentedControl colors. final MoonSegmentedControlColors colors; @@ -28,19 +20,37 @@ class MoonSegmentedControlTheme extends ThemeExtension("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("sizes", sizes)); diff --git a/lib/src/theme/switch/switch_colors.dart b/lib/src/theme/switch/switch_colors.dart index abc2e683..5a54417c 100644 --- a/lib/src/theme/switch/switch_colors.dart +++ b/lib/src/theme/switch/switch_colors.dart @@ -1,35 +1,10 @@ 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 MoonSwitchColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonSwitchColors( - activeTrackColor: MoonColors.light.piccolo, - inactiveTrackColor: MoonColors.light.beerus, - activeTextColor: MoonTypography.dark.colors.bodyPrimary, - inactiveTextColor: MoonTypography.light.colors.bodyPrimary, - activeIconColor: MoonIconTheme.dark.colors.primaryColor, - inactiveIconColor: MoonIconTheme.light.colors.primaryColor, - thumbIconColor: MoonIconTheme.light.colors.primaryColor, - thumbColor: MoonColors.light.goten, - ); - - static final dark = MoonSwitchColors( - activeTrackColor: MoonColors.dark.piccolo, - inactiveTrackColor: MoonColors.dark.beerus, - activeTextColor: MoonTypography.dark.colors.bodyPrimary, - inactiveTextColor: MoonTypography.dark.colors.bodyPrimary, - activeIconColor: MoonIconTheme.dark.colors.primaryColor, - inactiveIconColor: MoonIconTheme.dark.colors.primaryColor, - thumbIconColor: MoonIconTheme.light.colors.primaryColor, - thumbColor: MoonColors.dark.goten, - ); - /// Switch active track color. final Color activeTrackColor; diff --git a/lib/src/theme/switch/switch_properties.dart b/lib/src/theme/switch/switch_properties.dart index 92168549..bc4912f5 100644 --- a/lib/src/theme/switch/switch_properties.dart +++ b/lib/src/theme/switch/switch_properties.dart @@ -3,11 +3,6 @@ import 'package:flutter/material.dart'; @immutable class MoonSwitchProperties extends ThemeExtension with DiagnosticableTreeMixin { - static const properties = MoonSwitchProperties( - transitionDuration: Duration(milliseconds: 200), - transitionCurve: Curves.easeInOutCubic, - ); - /// Switch transition duration. final Duration transitionDuration; diff --git a/lib/src/theme/switch/switch_shadows.dart b/lib/src/theme/switch/switch_shadows.dart index 9ed8cee2..2946f45e 100644 --- a/lib/src/theme/switch/switch_shadows.dart +++ b/lib/src/theme/switch/switch_shadows.dart @@ -1,18 +1,8 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/shadows.dart'; - @immutable class MoonSwitchShadows extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonSwitchShadows( - thumbShadows: MoonShadows.light.sm, - ); - - static final dark = MoonSwitchShadows( - thumbShadows: MoonShadows.dark.sm, - ); - /// Switch thumb shadows. final List thumbShadows; diff --git a/lib/src/theme/switch/switch_size_properties.dart b/lib/src/theme/switch/switch_size_properties.dart index 9cc5f5df..ba760d3e 100644 --- a/lib/src/theme/switch/switch_size_properties.dart +++ b/lib/src/theme/switch/switch_size_properties.dart @@ -3,38 +3,8 @@ import 'dart:ui'; 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 + 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. final double height; diff --git a/lib/src/theme/switch/switch_sizes.dart b/lib/src/theme/switch/switch_sizes.dart index 8e7ba1cc..bcfa78b7 100644 --- a/lib/src/theme/switch/switch_sizes.dart +++ b/lib/src/theme/switch/switch_sizes.dart @@ -2,14 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/switch/switch_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonSwitchSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonSwitchSizes( - x2s: MoonSwitchSizeProperties.x2s, - xs: MoonSwitchSizeProperties.xs, - sm: MoonSwitchSizeProperties.sm, - ); + /// MDS tokens. + final MoonTokens tokens; /// (2x) Extra small switch properties. final MoonSwitchSizeProperties x2s; @@ -20,19 +18,48 @@ class MoonSwitchSizes extends ThemeExtension with Diagnosticabl /// Small switch properties. final MoonSwitchSizeProperties sm; - const MoonSwitchSizes({ - required this.x2s, - required this.xs, - required this.sm, - }); + MoonSwitchSizes({ + required this.tokens, + MoonSwitchSizeProperties? x2s, + MoonSwitchSizeProperties? xs, + MoonSwitchSizeProperties? sm, + }) : x2s = x2s ?? + MoonSwitchSizeProperties( + height: tokens.sizes.x2s, + width: 2 * tokens.sizes.x3s + 2 * tokens.sizes.x5s, + thumbSizeValue: tokens.sizes.x3s, + iconSizeValue: tokens.sizes.x3s, + padding: EdgeInsets.all(tokens.sizes.x6s), + textStyle: tokens.typography.caption.text6.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1), + ), + xs = xs ?? + MoonSwitchSizeProperties( + height: tokens.sizes.xs, + width: 2 * tokens.sizes.x2s + 3 * tokens.sizes.x5s, + thumbSizeValue: tokens.sizes.x2s, + iconSizeValue: tokens.sizes.x2s, + padding: EdgeInsets.all(tokens.sizes.x5s), + textStyle: tokens.typography.caption.text8.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1), + ), + sm = sm ?? + MoonSwitchSizeProperties( + height: tokens.sizes.sm, + width: 2 * tokens.sizes.xs + 3 * tokens.sizes.x5s, + thumbSizeValue: tokens.sizes.xs, + iconSizeValue: tokens.sizes.xs, + padding: EdgeInsets.all(tokens.sizes.x5s), + textStyle: tokens.typography.caption.text10.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1), + ); @override MoonSwitchSizes copyWith({ + MoonTokens? tokens, MoonSwitchSizeProperties? x2s, MoonSwitchSizeProperties? xs, MoonSwitchSizeProperties? sm, }) { return MoonSwitchSizes( + tokens: tokens ?? this.tokens, x2s: x2s ?? this.x2s, xs: xs ?? this.xs, sm: sm ?? this.sm, @@ -44,6 +71,7 @@ class MoonSwitchSizes extends ThemeExtension with Diagnosticabl if (other is! MoonSwitchSizes) return this; return MoonSwitchSizes( + tokens: tokens.lerp(other.tokens, t), x2s: x2s.lerp(other.x2s, t), xs: xs.lerp(other.xs, t), sm: sm.lerp(other.sm, t), @@ -55,6 +83,7 @@ class MoonSwitchSizes extends ThemeExtension with Diagnosticabl super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonSwitchSizes")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("x2s", x2s)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)); diff --git a/lib/src/theme/switch/switch_theme.dart b/lib/src/theme/switch/switch_theme.dart index 713ac92e..c80282ba 100644 --- a/lib/src/theme/switch/switch_theme.dart +++ b/lib/src/theme/switch/switch_theme.dart @@ -5,22 +5,12 @@ import 'package:moon_design/src/theme/switch/switch_colors.dart'; import 'package:moon_design/src/theme/switch/switch_properties.dart'; import 'package:moon_design/src/theme/switch/switch_shadows.dart'; import 'package:moon_design/src/theme/switch/switch_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonSwitchTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonSwitchTheme( - colors: MoonSwitchColors.light, - properties: MoonSwitchProperties.properties, - shadows: MoonSwitchShadows.light, - sizes: MoonSwitchSizes.sizes, - ); - - static final dark = MoonSwitchTheme( - colors: MoonSwitchColors.dark, - properties: MoonSwitchProperties.properties, - shadows: MoonSwitchShadows.dark, - sizes: MoonSwitchSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// Switch colors. final MoonSwitchColors colors; @@ -34,21 +24,44 @@ class MoonSwitchTheme extends ThemeExtension with Diagnosticabl /// Switch sizes. final MoonSwitchSizes sizes; - const MoonSwitchTheme({ - required this.colors, - required this.properties, - required this.shadows, - required this.sizes, - }); + MoonSwitchTheme({ + required this.tokens, + MoonSwitchColors? colors, + MoonSwitchProperties? properties, + MoonSwitchShadows? shadows, + MoonSwitchSizes? sizes, + }) : colors = colors ?? + MoonSwitchColors( + activeTrackColor: tokens.colors.piccolo, + inactiveTrackColor: tokens.colors.beerus, + activeTextColor: tokens.colors.goten, + inactiveTextColor: tokens.colors.bulma, + activeIconColor: tokens.colors.goten, + inactiveIconColor: tokens.colors.bulma, + thumbIconColor: tokens.colors.popo, + thumbColor: tokens.colors.goten, + ), + properties = properties ?? + MoonSwitchProperties( + transitionDuration: tokens.transitions.defaultTransitionDuration, + transitionCurve: tokens.transitions.defaultTransitionCurve, + ), + shadows = shadows ?? + MoonSwitchShadows( + thumbShadows: tokens.shadows.sm, + ), + sizes = sizes ?? MoonSwitchSizes(tokens: tokens); @override MoonSwitchTheme copyWith({ + MoonTokens? tokens, MoonSwitchColors? colors, MoonSwitchProperties? properties, MoonSwitchShadows? shadows, MoonSwitchSizes? sizes, }) { return MoonSwitchTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, @@ -61,6 +74,7 @@ class MoonSwitchTheme extends ThemeExtension with Diagnosticabl if (other is! MoonSwitchTheme) return this; return MoonSwitchTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), @@ -73,6 +87,7 @@ class MoonSwitchTheme extends ThemeExtension with Diagnosticabl super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonSwitchTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("shadows", shadows)) diff --git a/lib/src/theme/tab_bar/tab_bar_colors.dart b/lib/src/theme/tab_bar/tab_bar_colors.dart index 050d9dce..b0a10e3e 100644 --- a/lib/src/theme/tab_bar/tab_bar_colors.dart +++ b/lib/src/theme/tab_bar/tab_bar_colors.dart @@ -1,28 +1,10 @@ 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 class MoonTabBarColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTabBarColors( - indicatorColor: MoonColors.light.piccolo, - textColor: MoonTypography.light.colors.bodyPrimary, - selectedTextColor: MoonColors.light.piccolo, - selectedPillTextColor: MoonTypography.light.colors.bodyPrimary, - selectedPillTabColor: MoonColors.light.gohan, - ); - - static final dark = MoonTabBarColors( - indicatorColor: MoonColors.dark.piccolo, - textColor: MoonTypography.dark.colors.bodyPrimary, - selectedTextColor: MoonColors.dark.piccolo, - selectedPillTextColor: MoonTypography.dark.colors.bodyPrimary, - selectedPillTabColor: MoonColors.dark.gohan, - ); - /// TabBar tab indicator color. final Color indicatorColor; diff --git a/lib/src/theme/tab_bar/tab_bar_properties.dart b/lib/src/theme/tab_bar/tab_bar_properties.dart index 0b61ad7f..366e13af 100644 --- a/lib/src/theme/tab_bar/tab_bar_properties.dart +++ b/lib/src/theme/tab_bar/tab_bar_properties.dart @@ -3,16 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/moon_design.dart'; - @immutable class MoonTabBarProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonTabBarProperties( - gap: MoonSizes.sizes.x5s, - transitionDuration: const Duration(milliseconds: 200), - transitionCurve: Curves.easeInOutCubic, - ); - /// Gap between TabBar children. final double gap; 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 370a4d76..d7ae789b 100644 --- a/lib/src/theme/tab_bar/tab_bar_size_properties.dart +++ b/lib/src/theme/tab_bar/tab_bar_size_properties.dart @@ -3,32 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonTabBarSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final sm = MoonTabBarSizeProperties( - borderRadius: MoonBorders.borders.interactiveXs, - tabGap: MoonSizes.sizes.x5s, - height: MoonSizes.sizes.sm, - iconSizeValue: MoonSizes.sizes.xs, - indicatorHeight: MoonSizes.sizes.x6s, - tabPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s), - textStyle: MoonTextStyles.heading.textDefault, - ); - - static final md = MoonTabBarSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - tabGap: MoonSizes.sizes.x4s, - height: MoonSizes.sizes.md, - iconSizeValue: MoonSizes.sizes.xs, - indicatorHeight: MoonSizes.sizes.x6s, - tabPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s), - textStyle: MoonTextStyles.heading.textDefault, - ); - /// TabBar pill tab border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/tab_bar/tab_bar_sizes.dart b/lib/src/theme/tab_bar/tab_bar_sizes.dart index 32e3f8db..c2d14619 100644 --- a/lib/src/theme/tab_bar/tab_bar_sizes.dart +++ b/lib/src/theme/tab_bar/tab_bar_sizes.dart @@ -2,13 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTabBarSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonTabBarSizes( - sm: MoonTabBarSizeProperties.sm, - md: MoonTabBarSizeProperties.md, - ); + /// MDS tokens. + final MoonTokens tokens; /// Small TabBar item properties. final MoonTabBarSizeProperties sm; @@ -16,17 +15,39 @@ class MoonTabBarSizes extends ThemeExtension with Diagnosticabl /// Medium TabBar item properties. final MoonTabBarSizeProperties md; - const MoonTabBarSizes({ - required this.sm, - required this.md, - }); + MoonTabBarSizes({ + required this.tokens, + MoonTabBarSizeProperties? sm, + MoonTabBarSizeProperties? md, + }) : sm = sm ?? + MoonTabBarSizeProperties( + borderRadius: tokens.borders.interactiveXs, + tabGap: tokens.sizes.x5s, + height: tokens.sizes.sm, + iconSizeValue: tokens.sizes.xs, + indicatorHeight: tokens.sizes.x6s, + tabPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), + textStyle: tokens.typography.heading.textDefault, + ), + md = md ?? + MoonTabBarSizeProperties( + borderRadius: tokens.borders.interactiveSm, + tabGap: tokens.sizes.x4s, + height: tokens.sizes.md, + iconSizeValue: tokens.sizes.xs, + indicatorHeight: tokens.sizes.x6s, + tabPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), + textStyle: tokens.typography.heading.textDefault, + ); @override MoonTabBarSizes copyWith({ + MoonTokens? tokens, MoonTabBarSizeProperties? sm, MoonTabBarSizeProperties? md, }) { return MoonTabBarSizes( + tokens: tokens ?? this.tokens, sm: sm ?? this.sm, md: md ?? this.md, ); @@ -37,6 +58,7 @@ class MoonTabBarSizes extends ThemeExtension with Diagnosticabl if (other is! MoonTabBarSizes) return this; return MoonTabBarSizes( + tokens: tokens.lerp(other.tokens, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), ); diff --git a/lib/src/theme/tab_bar/tab_bar_theme.dart b/lib/src/theme/tab_bar/tab_bar_theme.dart index 3dcad53b..f026cfe5 100644 --- a/lib/src/theme/tab_bar/tab_bar_theme.dart +++ b/lib/src/theme/tab_bar/tab_bar_theme.dart @@ -4,20 +4,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_colors.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_properties.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTabBarTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTabBarTheme( - colors: MoonTabBarColors.light, - properties: MoonTabBarProperties.properties, - sizes: MoonTabBarSizes.sizes, - ); - - static final dark = MoonTabBarTheme( - colors: MoonTabBarColors.dark, - properties: MoonTabBarProperties.properties, - sizes: MoonTabBarSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// TabBar colors. final MoonTabBarColors colors; @@ -28,19 +20,36 @@ class MoonTabBarTheme extends ThemeExtension with Diagnosticabl /// TabBar sizes. final MoonTabBarSizes sizes; - const MoonTabBarTheme({ - required this.colors, - required this.properties, - required this.sizes, - }); + MoonTabBarTheme({ + required this.tokens, + MoonTabBarColors? colors, + MoonTabBarProperties? properties, + MoonTabBarSizes? sizes, + }) : colors = colors ?? + MoonTabBarColors( + indicatorColor: tokens.colors.piccolo, + textColor: tokens.colors.textPrimary, + selectedTextColor: tokens.colors.piccolo, + selectedPillTextColor: tokens.colors.textPrimary, + selectedPillTabColor: tokens.colors.gohan, + ), + properties = properties ?? + MoonTabBarProperties( + gap: tokens.sizes.x5s, + transitionDuration: tokens.transitions.defaultTransitionDuration, + transitionCurve: tokens.transitions.defaultTransitionCurve, + ), + sizes = sizes ?? MoonTabBarSizes(tokens: tokens); @override MoonTabBarTheme copyWith({ + MoonTokens? tokens, MoonTabBarColors? colors, MoonTabBarProperties? properties, MoonTabBarSizes? sizes, }) { return MoonTabBarTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, sizes: sizes ?? this.sizes, @@ -52,6 +61,7 @@ class MoonTabBarTheme extends ThemeExtension with Diagnosticabl if (other is! MoonTabBarTheme) return this; return MoonTabBarTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), sizes: sizes.lerp(other.sizes, t), @@ -63,6 +73,7 @@ class MoonTabBarTheme extends ThemeExtension with Diagnosticabl super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonTabBarTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("sizes", sizes)); diff --git a/lib/src/theme/tag/tag_colors.dart b/lib/src/theme/tag/tag_colors.dart index f87b7a6d..a883325f 100644 --- a/lib/src/theme/tag/tag_colors.dart +++ b/lib/src/theme/tag/tag_colors.dart @@ -1,25 +1,10 @@ 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; diff --git a/lib/src/theme/tag/tag_size_properties.dart b/lib/src/theme/tag/tag_size_properties.dart index 2e790156..3e807064 100644 --- a/lib/src/theme/tag/tag_size_properties.dart +++ b/lib/src/theme/tag/tag_size_properties.dart @@ -3,32 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonTagSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final x2s = MoonTagSizeProperties( - borderRadius: MoonBorders.borders.interactiveXs, - gap: MoonSizes.sizes.x5s, - height: MoonSizes.sizes.x2s, - iconSizeValue: MoonSizes.sizes.x3s, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), - textStyle: MoonTextStyles.body.text10.copyWith(fontWeight: FontWeight.w400), - upperCaseTextStyle: MoonTextStyles.caption.text9, - ); - - static final xs = MoonTagSizeProperties( - borderRadius: MoonBorders.borders.interactiveXs, - gap: MoonSizes.sizes.x5s, - height: MoonSizes.sizes.xs, - iconSizeValue: MoonSizes.sizes.x2s, - padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s), - textStyle: MoonTextStyles.body.text12.copyWith(fontWeight: FontWeight.w400), - upperCaseTextStyle: MoonTextStyles.caption.text10, - ); - /// Tag border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/tag/tag_sizes.dart b/lib/src/theme/tag/tag_sizes.dart index 8d9930b2..8036445a 100644 --- a/lib/src/theme/tag/tag_sizes.dart +++ b/lib/src/theme/tag/tag_sizes.dart @@ -2,13 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tag/tag_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTagSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonTagSizes( - x2s: MoonTagSizeProperties.x2s, - xs: MoonTagSizeProperties.xs, - ); + /// MDS tokens. + final MoonTokens tokens; /// (2x) Extra small tag properties. final MoonTagSizeProperties x2s; @@ -16,17 +15,39 @@ class MoonTagSizes extends ThemeExtension with DiagnosticableTreeM /// Extra small tag properties. final MoonTagSizeProperties xs; - const MoonTagSizes({ - required this.x2s, - required this.xs, - }); + MoonTagSizes({ + required this.tokens, + MoonTagSizeProperties? x2s, + MoonTagSizeProperties? xs, + }) : x2s = x2s ?? + MoonTagSizeProperties( + borderRadius: tokens.borders.interactiveXs, + gap: tokens.sizes.x5s, + height: tokens.sizes.x2s, + iconSizeValue: tokens.sizes.x3s, + padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), + textStyle: tokens.typography.body.text10.copyWith(fontWeight: FontWeight.w400), + upperCaseTextStyle: tokens.typography.caption.text9, + ), + xs = xs ?? + MoonTagSizeProperties( + borderRadius: tokens.borders.interactiveXs, + gap: tokens.sizes.x5s, + height: tokens.sizes.xs, + iconSizeValue: tokens.sizes.x2s, + padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), + textStyle: tokens.typography.body.text12.copyWith(fontWeight: FontWeight.w400), + upperCaseTextStyle: tokens.typography.caption.text10, + ); @override MoonTagSizes copyWith({ + MoonTokens? tokens, MoonTagSizeProperties? x2s, MoonTagSizeProperties? xs, }) { return MoonTagSizes( + tokens: tokens ?? this.tokens, x2s: x2s ?? this.x2s, xs: xs ?? this.xs, ); @@ -37,6 +58,7 @@ class MoonTagSizes extends ThemeExtension with DiagnosticableTreeM if (other is! MoonTagSizes) return this; return MoonTagSizes( + tokens: tokens.lerp(other.tokens, t), x2s: x2s.lerp(other.x2s, t), xs: xs.lerp(other.xs, t), ); @@ -47,6 +69,7 @@ class MoonTagSizes extends ThemeExtension with DiagnosticableTreeM super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTagSizes")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("x2s", x2s)) ..add(DiagnosticsProperty("xs", xs)); } diff --git a/lib/src/theme/tag/tag_theme.dart b/lib/src/theme/tag/tag_theme.dart index 03ef5912..3c5809c4 100644 --- a/lib/src/theme/tag/tag_theme.dart +++ b/lib/src/theme/tag/tag_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tag/tag_colors.dart'; import 'package:moon_design/src/theme/tag/tag_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTagTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTagTheme( - colors: MoonTagColors.light, - sizes: MoonTagSizes.sizes, - ); - - static final dark = MoonTagTheme( - colors: MoonTagColors.dark, - sizes: MoonTagSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// Tag colors. final MoonTagColors colors; @@ -22,17 +16,26 @@ class MoonTagTheme extends ThemeExtension with DiagnosticableTreeM /// Tag sizes. final MoonTagSizes sizes; - const MoonTagTheme({ - required this.colors, - required this.sizes, - }); + MoonTagTheme({ + required this.tokens, + MoonTagColors? colors, + MoonTagSizes? sizes, + }) : colors = colors ?? + MoonTagColors( + textColor: tokens.colors.textPrimary, + iconColor: tokens.colors.iconPrimary, + backgroundColor: tokens.colors.gohan, + ), + sizes = sizes ?? MoonTagSizes(tokens: tokens); @override MoonTagTheme copyWith({ + MoonTokens? tokens, MoonTagColors? colors, MoonTagSizes? sizes, }) { return MoonTagTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); @@ -43,6 +46,7 @@ class MoonTagTheme extends ThemeExtension with DiagnosticableTreeM if (other is! MoonTagTheme) return this; return MoonTagTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); @@ -53,6 +57,7 @@ class MoonTagTheme extends ThemeExtension with DiagnosticableTreeM super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTagTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } diff --git a/lib/src/theme/text_area/text_area_colors.dart b/lib/src/theme/text_area/text_area_colors.dart index 97b249ce..465e6efd 100644 --- a/lib/src/theme/text_area/text_area_colors.dart +++ b/lib/src/theme/text_area/text_area_colors.dart @@ -1,29 +1,10 @@ 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 MoonTextAreaColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTextAreaColors( - backgroundColor: MoonColors.light.gohan, - activeBorderColor: MoonColors.light.piccolo, - inactiveBorderColor: MoonColors.light.beerus, - errorBorderColor: MoonColors.light.chiChi100, - hoverBorderColor: MoonColors.light.beerus, - hintTextColor: MoonColors.light.trunks, - ); - - static final dark = MoonTextAreaColors( - backgroundColor: MoonColors.dark.gohan, - activeBorderColor: MoonColors.dark.piccolo, - inactiveBorderColor: MoonColors.dark.beerus, - errorBorderColor: MoonColors.dark.chiChi100, - hoverBorderColor: MoonColors.dark.beerus, - hintTextColor: MoonColors.dark.trunks, - ); - /// TextArea background color. final Color backgroundColor; diff --git a/lib/src/theme/text_area/text_area_properties.dart b/lib/src/theme/text_area/text_area_properties.dart index 82a8febd..7dd8fd46 100644 --- a/lib/src/theme/text_area/text_area_properties.dart +++ b/lib/src/theme/text_area/text_area_properties.dart @@ -1,22 +1,8 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonTextAreaProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonTextAreaProperties( - borderRadius: MoonBorders.borders.interactiveSm, - transitionDuration: const Duration(milliseconds: 200), - transitionCurve: Curves.easeInOutCubic, - supportingPadding: EdgeInsets.only(top: MoonSizes.sizes.x4s), - textPadding: EdgeInsets.all(MoonSizes.sizes.x2s), - textStyle: MoonTextStyles.body.text16, - helperTextStyle: MoonTextStyles.body.text12, - ); - /// TextArea border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/text_area/text_area_theme.dart b/lib/src/theme/text_area/text_area_theme.dart index 7d65d6b9..214d58fe 100644 --- a/lib/src/theme/text_area/text_area_theme.dart +++ b/lib/src/theme/text_area/text_area_theme.dart @@ -3,18 +3,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/text_area/text_area_colors.dart'; import 'package:moon_design/src/theme/text_area/text_area_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTextAreaTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTextAreaTheme( - colors: MoonTextAreaColors.light, - properties: MoonTextAreaProperties.properties, - ); - - static final dark = MoonTextAreaTheme( - colors: MoonTextAreaColors.dark, - properties: MoonTextAreaProperties.properties, - ); + /// MDS tokens. + final MoonTokens tokens; /// TextArea colors. final MoonTextAreaColors colors; @@ -22,17 +16,38 @@ class MoonTextAreaTheme extends ThemeExtension with Diagnosti /// TextArea properties. final MoonTextAreaProperties properties; - const MoonTextAreaTheme({ - required this.colors, - required this.properties, - }); + MoonTextAreaTheme({ + required this.tokens, + MoonTextAreaColors? colors, + MoonTextAreaProperties? properties, + }) : colors = colors ?? + MoonTextAreaColors( + backgroundColor: tokens.colors.gohan, + activeBorderColor: tokens.colors.piccolo, + inactiveBorderColor: tokens.colors.beerus, + errorBorderColor: tokens.colors.chiChi100, + hoverBorderColor: tokens.colors.beerus, + hintTextColor: tokens.colors.trunks, + ), + properties = properties ?? + MoonTextAreaProperties( + borderRadius: tokens.borders.interactiveSm, + transitionDuration: tokens.transitions.defaultTransitionDuration, + transitionCurve: tokens.transitions.defaultTransitionCurve, + supportingPadding: EdgeInsets.only(top: tokens.sizes.x4s), + textPadding: EdgeInsets.all(tokens.sizes.x2s), + textStyle: tokens.typography.body.text16, + helperTextStyle: tokens.typography.body.text12, + ); @override MoonTextAreaTheme copyWith({ + MoonTokens? tokens, MoonTextAreaColors? colors, MoonTextAreaProperties? properties, }) { return MoonTextAreaTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); @@ -43,6 +58,7 @@ class MoonTextAreaTheme extends ThemeExtension with Diagnosti if (other is! MoonTextAreaTheme) return this; return MoonTextAreaTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); @@ -53,6 +69,7 @@ class MoonTextAreaTheme extends ThemeExtension with Diagnosti super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonTextAreaTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)); } diff --git a/lib/src/theme/text_input/text_input_colors.dart b/lib/src/theme/text_input/text_input_colors.dart index 647a0cf3..8910c0b3 100644 --- a/lib/src/theme/text_input/text_input_colors.dart +++ b/lib/src/theme/text_input/text_input_colors.dart @@ -1,31 +1,10 @@ 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 MoonTextInputColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTextInputColors( - backgroundColor: MoonColors.light.gohan, - activeBorderColor: MoonColors.light.piccolo, - inactiveBorderColor: MoonColors.light.beerus, - errorBorderColor: MoonColors.light.chiChi100, - hoverBorderColor: MoonColors.light.beerus, - labelTextColor: MoonColors.light.trunks, - supportingTextColor: MoonColors.light.trunks, - ); - - static final dark = MoonTextInputColors( - backgroundColor: MoonColors.dark.gohan, - activeBorderColor: MoonColors.dark.piccolo, - inactiveBorderColor: MoonColors.dark.beerus, - errorBorderColor: MoonColors.dark.chiChi100, - hoverBorderColor: MoonColors.dark.beerus, - labelTextColor: MoonColors.dark.trunks, - supportingTextColor: MoonColors.dark.trunks, - ); - /// TextInput background color. final Color backgroundColor; diff --git a/lib/src/theme/text_input/text_input_properties.dart b/lib/src/theme/text_input/text_input_properties.dart index ba923d14..c62acf20 100644 --- a/lib/src/theme/text_input/text_input_properties.dart +++ b/lib/src/theme/text_input/text_input_properties.dart @@ -1,18 +1,8 @@ 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 MoonTextInputProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonTextInputProperties( - transitionDuration: const Duration(milliseconds: 200), - transitionCurve: Curves.easeInOutCubic, - helperPadding: EdgeInsets.only(top: MoonSizes.sizes.x4s), - helperTextStyle: MoonTextStyles.body.text12, - ); - /// TextInput transition duration. final Duration transitionDuration; 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 06992e09..7ae207f8 100644 --- a/lib/src/theme/text_input/text_input_size_properties.dart +++ b/lib/src/theme/text_input/text_input_size_properties.dart @@ -3,60 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonTextInputSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final sm = MoonTextInputSizeProperties( - borderRadius: MoonBorders.borders.interactiveXs, - height: MoonSizes.sizes.sm, - gap: MoonSizes.sizes.x4s, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric( - horizontal: MoonSizes.sizes.x4s, - vertical: MoonSizes.sizes.x6s, - ), - textStyle: MoonTextStyles.body.textDefault, - ); - - static final md = MoonTextInputSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - height: MoonSizes.sizes.md, - gap: MoonSizes.sizes.x4s, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric( - horizontal: MoonSizes.sizes.x3s, - vertical: 6, - ), - textStyle: MoonTextStyles.body.textDefault, - ); - - static final lg = MoonTextInputSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - height: MoonSizes.sizes.lg, - gap: MoonSizes.sizes.x4s, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric( - horizontal: MoonSizes.sizes.x3s, - vertical: MoonSizes.sizes.x4s, - ), - textStyle: MoonTextStyles.body.text16, - ); - - static final xl = MoonTextInputSizeProperties( - borderRadius: MoonBorders.borders.interactiveSm, - height: MoonSizes.sizes.xl, - gap: MoonSizes.sizes.x2s, - iconSizeValue: MoonSizes.sizes.xs, - padding: EdgeInsets.symmetric( - horizontal: MoonSizes.sizes.x2s, - vertical: MoonSizes.sizes.x3s, - ), - textStyle: MoonTextStyles.body.text16, - ); - /// TextInput border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/text_input/text_input_sizes.dart b/lib/src/theme/text_input/text_input_sizes.dart index c96e8d2e..2f85850c 100644 --- a/lib/src/theme/text_input/text_input_sizes.dart +++ b/lib/src/theme/text_input/text_input_sizes.dart @@ -2,15 +2,12 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/text_input/text_input_size_properties.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTextInputSizes extends ThemeExtension with DiagnosticableTreeMixin { - static final sizes = MoonTextInputSizes( - sm: MoonTextInputSizeProperties.sm, - md: MoonTextInputSizeProperties.md, - lg: MoonTextInputSizeProperties.lg, - xl: MoonTextInputSizeProperties.xl, - ); + /// MDS tokens. + final MoonTokens tokens; /// Small TextInput properties. final MoonTextInputSizeProperties sm; @@ -24,21 +21,71 @@ class MoonTextInputSizes extends ThemeExtension with Diagnos /// Extra large (floating) TextInput properties. final MoonTextInputSizeProperties xl; - const MoonTextInputSizes({ - required this.sm, - required this.md, - required this.lg, - required this.xl, - }); + MoonTextInputSizes({ + required this.tokens, + MoonTextInputSizeProperties? sm, + MoonTextInputSizeProperties? md, + MoonTextInputSizeProperties? lg, + MoonTextInputSizeProperties? xl, + }) : sm = sm ?? + MoonTextInputSizeProperties( + borderRadius: tokens.borders.interactiveXs, + height: tokens.sizes.sm, + gap: tokens.sizes.x4s, + iconSizeValue: tokens.sizes.xs, + padding: EdgeInsets.symmetric( + horizontal: tokens.sizes.x4s, + vertical: tokens.sizes.x6s, + ), + textStyle: tokens.typography.body.textDefault, + ), + md = md ?? + MoonTextInputSizeProperties( + borderRadius: tokens.borders.interactiveSm, + height: tokens.sizes.md, + gap: tokens.sizes.x4s, + iconSizeValue: tokens.sizes.xs, + padding: EdgeInsets.symmetric( + horizontal: tokens.sizes.x3s, + vertical: 6, + ), + textStyle: tokens.typography.body.textDefault, + ), + lg = lg ?? + MoonTextInputSizeProperties( + borderRadius: tokens.borders.interactiveSm, + height: tokens.sizes.lg, + gap: tokens.sizes.x4s, + iconSizeValue: tokens.sizes.xs, + padding: EdgeInsets.symmetric( + horizontal: tokens.sizes.x3s, + vertical: tokens.sizes.x4s, + ), + textStyle: tokens.typography.body.text16, + ), + xl = xl ?? + MoonTextInputSizeProperties( + borderRadius: tokens.borders.interactiveSm, + height: tokens.sizes.xl, + gap: tokens.sizes.x2s, + iconSizeValue: tokens.sizes.xs, + padding: EdgeInsets.symmetric( + horizontal: tokens.sizes.x2s, + vertical: tokens.sizes.x3s, + ), + textStyle: tokens.typography.body.text16, + ); @override MoonTextInputSizes copyWith({ + MoonTokens? tokens, MoonTextInputSizeProperties? sm, MoonTextInputSizeProperties? md, MoonTextInputSizeProperties? lg, MoonTextInputSizeProperties? xl, }) { return MoonTextInputSizes( + tokens: tokens ?? this.tokens, sm: sm ?? this.sm, md: md ?? this.md, lg: lg ?? this.lg, @@ -51,6 +98,7 @@ class MoonTextInputSizes extends ThemeExtension with Diagnos if (other is! MoonTextInputSizes) return this; return MoonTextInputSizes( + tokens: tokens.lerp(other.tokens, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), lg: lg.lerp(other.lg, t), @@ -63,6 +111,7 @@ class MoonTextInputSizes extends ThemeExtension with Diagnos super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTextInputSizes")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)) ..add(DiagnosticsProperty("lg", lg)) diff --git a/lib/src/theme/text_input/text_input_theme.dart b/lib/src/theme/text_input/text_input_theme.dart index 6fb1c74c..35311317 100644 --- a/lib/src/theme/text_input/text_input_theme.dart +++ b/lib/src/theme/text_input/text_input_theme.dart @@ -4,20 +4,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/text_input/text_input_colors.dart'; import 'package:moon_design/src/theme/text_input/text_input_properties.dart'; import 'package:moon_design/src/theme/text_input/text_input_sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTextInputTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTextInputTheme( - colors: MoonTextInputColors.light, - properties: MoonTextInputProperties.properties, - sizes: MoonTextInputSizes.sizes, - ); - - static final dark = MoonTextInputTheme( - colors: MoonTextInputColors.dark, - properties: MoonTextInputProperties.properties, - sizes: MoonTextInputSizes.sizes, - ); + /// MDS tokens. + final MoonTokens tokens; /// TextInput colors. final MoonTextInputColors colors; @@ -28,19 +20,39 @@ class MoonTextInputTheme extends ThemeExtension with Diagnos /// TextInput sizes. final MoonTextInputSizes sizes; - const MoonTextInputTheme({ - required this.colors, - required this.properties, - required this.sizes, - }); + MoonTextInputTheme({ + required this.tokens, + MoonTextInputColors? colors, + MoonTextInputProperties? properties, + MoonTextInputSizes? sizes, + }) : colors = colors ?? + MoonTextInputColors( + backgroundColor: tokens.colors.gohan, + activeBorderColor: tokens.colors.piccolo, + inactiveBorderColor: tokens.colors.beerus, + errorBorderColor: tokens.colors.chiChi100, + hoverBorderColor: tokens.colors.beerus, + labelTextColor: tokens.colors.trunks, + supportingTextColor: tokens.colors.trunks, + ), + properties = properties ?? + MoonTextInputProperties( + transitionDuration: tokens.transitions.defaultTransitionDuration, + transitionCurve: tokens.transitions.defaultTransitionCurve, + helperPadding: EdgeInsets.only(top: tokens.sizes.x4s), + helperTextStyle: tokens.typography.body.text12, + ), + sizes = sizes ?? MoonTextInputSizes(tokens: tokens); @override MoonTextInputTheme copyWith({ + MoonTokens? tokens, MoonTextInputColors? colors, MoonTextInputProperties? properties, MoonTextInputSizes? sizes, }) { return MoonTextInputTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, sizes: sizes ?? this.sizes, @@ -52,6 +64,7 @@ class MoonTextInputTheme extends ThemeExtension with Diagnos if (other is! MoonTextInputTheme) return this; return MoonTextInputTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), sizes: sizes.lerp(other.sizes, t), @@ -63,6 +76,7 @@ class MoonTextInputTheme extends ThemeExtension with Diagnos super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonTextInputTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("sizes", sizes)); diff --git a/lib/src/theme/theme.dart b/lib/src/theme/theme.dart index 1f6d2a15..86765913 100644 --- a/lib/src/theme/theme.dart +++ b/lib/src/theme/theme.dart @@ -5,112 +5,42 @@ import 'package:moon_design/src/theme/accordion/accordion_theme.dart'; import 'package:moon_design/src/theme/alert/alert_theme.dart'; import 'package:moon_design/src/theme/authcode/authcode_theme.dart'; import 'package:moon_design/src/theme/avatar/avatar_theme.dart'; -import 'package:moon_design/src/theme/borders.dart'; import 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_theme.dart'; import 'package:moon_design/src/theme/button/button_theme.dart'; import 'package:moon_design/src/theme/carousel/carousel_theme.dart'; import 'package:moon_design/src/theme/checkbox/checkbox_theme.dart'; import 'package:moon_design/src/theme/chip/chip_theme.dart'; -import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/dot_indicator/dot_indicator_theme.dart'; import 'package:moon_design/src/theme/drawer/drawer_theme.dart'; -import 'package:moon_design/src/theme/effects/effects.dart'; -import 'package:moon_design/src/theme/icons/icon_theme.dart'; +import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_theme.dart'; import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_theme.dart'; import 'package:moon_design/src/theme/modal/modal_theme.dart'; -import 'package:moon_design/src/theme/opacity.dart'; import 'package:moon_design/src/theme/popover/popover_theme.dart'; import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_theme.dart'; import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_theme.dart'; import 'package:moon_design/src/theme/radio/radio_theme.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_theme.dart'; -import 'package:moon_design/src/theme/shadows.dart'; -import 'package:moon_design/src/theme/sizes.dart'; import 'package:moon_design/src/theme/switch/switch_theme.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_theme.dart'; import 'package:moon_design/src/theme/tag/tag_theme.dart'; import 'package:moon_design/src/theme/text_area/text_area_theme.dart'; import 'package:moon_design/src/theme/text_input/text_input_theme.dart'; import 'package:moon_design/src/theme/toast/toast_theme.dart'; +import 'package:moon_design/src/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/opacities.dart'; +import 'package:moon_design/src/theme/tokens/shadows.dart'; +import 'package:moon_design/src/theme/tokens/sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/theme/tooltip/tooltip_theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; @immutable class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTheme( - accordionTheme: MoonAccordionTheme.light, - alertTheme: MoonAlertTheme.light, - authCodeTheme: MoonAuthCodeTheme.light, - avatarTheme: MoonAvatarTheme.light, - borders: MoonBorders.borders, - bottomSheetTheme: MoonBottomSheetTheme.light, - buttonTheme: MoonButtonTheme.light, - carouselTheme: MoonCarouselTheme.light, - checkboxTheme: MoonCheckboxTheme.light, - chipTheme: MoonChipTheme.light, - circularLoaderTheme: MoonCircularLoaderTheme.light, - circularProgressTheme: MoonCircularProgressTheme.light, - colors: MoonColors.light, - dotIndicatorTheme: MoonDotIndicatorTheme.light, - drawerTheme: MoonDrawerTheme.light, - effects: MoonEffects.light, - iconTheme: MoonIconTheme.light, - linearLoaderTheme: MoonLinearLoaderTheme.light, - linearProgressTheme: MoonLinearProgressTheme.light, - modalTheme: MoonModalTheme.light, - opacity: MoonOpacity.opacities, - popoverTheme: MoonPopoverTheme.light, - radioTheme: MoonRadioTheme.light, - segmentedControlTheme: MoonSegmentedControlTheme.light, - shadows: MoonShadows.light, - sizes: MoonSizes.sizes, - switchTheme: MoonSwitchTheme.light, - tabBarTheme: MoonTabBarTheme.light, - tagTheme: MoonTagTheme.light, - textAreaTheme: MoonTextAreaTheme.light, - textInputTheme: MoonTextInputTheme.light, - toastTheme: MoonToastTheme.light, - tooltipTheme: MoonTooltipTheme.light, - typography: MoonTypography.light, - ); - - static final dark = MoonTheme( - accordionTheme: MoonAccordionTheme.dark, - alertTheme: MoonAlertTheme.dark, - authCodeTheme: MoonAuthCodeTheme.dark, - avatarTheme: MoonAvatarTheme.dark, - borders: MoonBorders.borders, - bottomSheetTheme: MoonBottomSheetTheme.dark, - buttonTheme: MoonButtonTheme.dark, - carouselTheme: MoonCarouselTheme.dark, - checkboxTheme: MoonCheckboxTheme.dark, - chipTheme: MoonChipTheme.dark, - circularLoaderTheme: MoonCircularLoaderTheme.dark, - circularProgressTheme: MoonCircularProgressTheme.dark, - colors: MoonColors.dark, - dotIndicatorTheme: MoonDotIndicatorTheme.dark, - drawerTheme: MoonDrawerTheme.dark, - effects: MoonEffects.dark, - iconTheme: MoonIconTheme.dark, - linearLoaderTheme: MoonLinearLoaderTheme.dark, - linearProgressTheme: MoonLinearProgressTheme.dark, - modalTheme: MoonModalTheme.dark, - opacity: MoonOpacity.opacities, - popoverTheme: MoonPopoverTheme.dark, - radioTheme: MoonRadioTheme.dark, - segmentedControlTheme: MoonSegmentedControlTheme.dark, - shadows: MoonShadows.dark, - sizes: MoonSizes.sizes, - switchTheme: MoonSwitchTheme.dark, - tabBarTheme: MoonTabBarTheme.dark, - tagTheme: MoonTagTheme.dark, - textAreaTheme: MoonTextAreaTheme.dark, - textInputTheme: MoonTextInputTheme.dark, - toastTheme: MoonToastTheme.dark, - tooltipTheme: MoonTooltipTheme.dark, - typography: MoonTypography.dark, - ); + ///Moon Design System tokens. + final MoonTokens tokens; /// Moon Design System MoonAccordion widget theming. final MoonAccordionTheme accordionTheme; @@ -124,9 +54,6 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { /// Moon Design System MoonAvatar widget theming. final MoonAvatarTheme avatarTheme; - /// Moon Design System borders. - final MoonBorders borders; - /// Moon Design System MoonButton widgets theming. final MoonBottomSheetTheme bottomSheetTheme; @@ -148,9 +75,6 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { /// Moon Design System MoonCircularProgress widget theming. final MoonCircularProgressTheme circularProgressTheme; - /// Moon Design System colors. - final MoonColors colors; - /// Moon Design System MoonDotIndicator widget theming. final MoonDotIndicatorTheme dotIndicatorTheme; @@ -158,10 +82,7 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { final MoonDrawerTheme drawerTheme; /// Moon Design System effects. - final MoonEffects effects; - - /// Moon Design System icons theming. - final MoonIconTheme iconTheme; + final MoonEffectsTheme effects; /// Moon Design System MoonLinearLoader widget theming. final MoonLinearLoaderTheme linearLoaderTheme; @@ -172,9 +93,6 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { /// Moon Design System MoonModal widget theming. final MoonModalTheme modalTheme; - /// Moon Design System opacities. - final MoonOpacity opacity; - /// Moon Design System MoonPopover widget theming. final MoonPopoverTheme popoverTheme; @@ -184,12 +102,6 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { /// Moon Design System MoonSegmentedControl widget theming. final MoonSegmentedControlTheme segmentedControlTheme; - /// Moon Design System shadows. - final MoonShadows shadows; - - /// Moon Design System sizes. - final MoonSizes sizes; - /// Moon Design System MoonSwitch widget theming. final MoonSwitchTheme switchTheme; @@ -211,53 +123,70 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { /// Moon Design System MoonTooltip widget theming. final MoonTooltipTheme tooltipTheme; - /// Moon Design System typography. - final MoonTypography typography; - - const MoonTheme({ - required this.accordionTheme, - required this.alertTheme, - required this.authCodeTheme, - required this.avatarTheme, - required this.borders, - required this.bottomSheetTheme, - required this.buttonTheme, - required this.carouselTheme, - required this.checkboxTheme, - required this.chipTheme, - required this.circularLoaderTheme, - required this.circularProgressTheme, - required this.colors, - required this.dotIndicatorTheme, - required this.drawerTheme, - required this.effects, - required this.iconTheme, - required this.linearLoaderTheme, - required this.linearProgressTheme, - required this.modalTheme, - required this.opacity, - required this.popoverTheme, - required this.radioTheme, - required this.segmentedControlTheme, - required this.shadows, - required this.sizes, - required this.switchTheme, - required this.tabBarTheme, - required this.tagTheme, - required this.textAreaTheme, - required this.textInputTheme, - required this.toastTheme, - required this.tooltipTheme, - required this.typography, - }); + MoonTheme({ + required this.tokens, + MoonAccordionTheme? accordionTheme, + MoonAlertTheme? alertTheme, + MoonAuthCodeTheme? authCodeTheme, + MoonAvatarTheme? avatarTheme, + MoonBottomSheetTheme? bottomSheetTheme, + MoonButtonTheme? buttonTheme, + MoonCarouselTheme? carouselTheme, + MoonCheckboxTheme? checkboxTheme, + MoonChipTheme? chipTheme, + MoonCircularLoaderTheme? circularLoaderTheme, + MoonCircularProgressTheme? circularProgressTheme, + MoonDotIndicatorTheme? dotIndicatorTheme, + MoonDrawerTheme? drawerTheme, + MoonEffectsTheme? effects, + MoonLinearLoaderTheme? linearLoaderTheme, + MoonLinearProgressTheme? linearProgressTheme, + MoonModalTheme? modalTheme, + MoonPopoverTheme? popoverTheme, + MoonRadioTheme? radioTheme, + MoonSegmentedControlTheme? segmentedControlTheme, + MoonSwitchTheme? switchTheme, + MoonTabBarTheme? tabBarTheme, + MoonTagTheme? tagTheme, + MoonTextAreaTheme? textAreaTheme, + MoonTextInputTheme? textInputTheme, + MoonToastTheme? toastTheme, + MoonTooltipTheme? tooltipTheme, + }) : accordionTheme = accordionTheme ?? MoonAccordionTheme(tokens: tokens), + alertTheme = alertTheme ?? MoonAlertTheme(tokens: tokens), + authCodeTheme = authCodeTheme ?? MoonAuthCodeTheme(tokens: tokens), + avatarTheme = avatarTheme ?? MoonAvatarTheme(tokens: tokens), + bottomSheetTheme = bottomSheetTheme ?? MoonBottomSheetTheme(tokens: tokens), + buttonTheme = buttonTheme ?? MoonButtonTheme(tokens: tokens), + carouselTheme = carouselTheme ?? MoonCarouselTheme(tokens: tokens), + checkboxTheme = checkboxTheme ?? MoonCheckboxTheme(tokens: tokens), + chipTheme = chipTheme ?? MoonChipTheme(tokens: tokens), + circularLoaderTheme = circularLoaderTheme ?? MoonCircularLoaderTheme(tokens: tokens), + circularProgressTheme = circularProgressTheme ?? MoonCircularProgressTheme(tokens: tokens), + dotIndicatorTheme = dotIndicatorTheme ?? MoonDotIndicatorTheme(tokens: tokens), + drawerTheme = drawerTheme ?? MoonDrawerTheme(tokens: tokens), + effects = effects ?? MoonEffectsTheme(tokens: tokens), + linearLoaderTheme = linearLoaderTheme ?? MoonLinearLoaderTheme(tokens: tokens), + linearProgressTheme = linearProgressTheme ?? MoonLinearProgressTheme(tokens: tokens), + modalTheme = modalTheme ?? MoonModalTheme(tokens: tokens), + popoverTheme = popoverTheme ?? MoonPopoverTheme(tokens: tokens), + radioTheme = radioTheme ?? MoonRadioTheme(tokens: tokens), + segmentedControlTheme = segmentedControlTheme ?? MoonSegmentedControlTheme(tokens: tokens), + switchTheme = switchTheme ?? MoonSwitchTheme(tokens: tokens), + tabBarTheme = tabBarTheme ?? MoonTabBarTheme(tokens: tokens), + tagTheme = tagTheme ?? MoonTagTheme(tokens: tokens), + textAreaTheme = textAreaTheme ?? MoonTextAreaTheme(tokens: tokens), + textInputTheme = textInputTheme ?? MoonTextInputTheme(tokens: tokens), + toastTheme = toastTheme ?? MoonToastTheme(tokens: tokens), + tooltipTheme = tooltipTheme ?? MoonTooltipTheme(tokens: tokens); @override MoonTheme copyWith({ + MoonTokens? tokens, MoonAccordionTheme? accordionTheme, MoonAlertTheme? alertTheme, MoonAuthCodeTheme? authCodeTheme, MoonAvatarTheme? avatarTheme, - MoonBorders? borders, MoonBottomSheetTheme? bottomSheetTheme, MoonButtonTheme? buttonTheme, MoonCarouselTheme? carouselTheme, @@ -265,20 +194,15 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { MoonChipTheme? chipTheme, MoonCircularLoaderTheme? circularLoaderTheme, MoonCircularProgressTheme? circularProgressTheme, - MoonColors? colors, MoonDotIndicatorTheme? dotIndicatorTheme, MoonDrawerTheme? drawerTheme, - MoonEffects? effects, - MoonIconTheme? iconTheme, + MoonEffectsTheme? effects, MoonLinearLoaderTheme? linearLoaderTheme, MoonLinearProgressTheme? linearProgressTheme, MoonModalTheme? modalTheme, - MoonOpacity? opacity, MoonPopoverTheme? popoverTheme, MoonRadioTheme? radioTheme, MoonSegmentedControlTheme? segmentedControlTheme, - MoonShadows? shadows, - MoonSizes? sizes, MoonSwitchTheme? switchTheme, MoonTabBarTheme? tabBarTheme, MoonTagTheme? tagTheme, @@ -286,14 +210,13 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { MoonTextInputTheme? textInputTheme, MoonToastTheme? toastTheme, MoonTooltipTheme? tooltipTheme, - MoonTypography? typography, }) { return MoonTheme( + tokens: tokens ?? this.tokens, accordionTheme: accordionTheme ?? this.accordionTheme, alertTheme: alertTheme ?? this.alertTheme, authCodeTheme: authCodeTheme ?? this.authCodeTheme, avatarTheme: avatarTheme ?? this.avatarTheme, - borders: borders ?? this.borders, bottomSheetTheme: bottomSheetTheme ?? this.bottomSheetTheme, buttonTheme: buttonTheme ?? this.buttonTheme, carouselTheme: carouselTheme ?? this.carouselTheme, @@ -301,20 +224,15 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { chipTheme: chipTheme ?? this.chipTheme, circularLoaderTheme: circularLoaderTheme ?? this.circularLoaderTheme, circularProgressTheme: circularProgressTheme ?? this.circularProgressTheme, - colors: colors ?? this.colors, dotIndicatorTheme: dotIndicatorTheme ?? this.dotIndicatorTheme, drawerTheme: drawerTheme ?? this.drawerTheme, effects: effects ?? this.effects, - iconTheme: iconTheme ?? this.iconTheme, linearLoaderTheme: linearLoaderTheme ?? this.linearLoaderTheme, linearProgressTheme: linearProgressTheme ?? this.linearProgressTheme, modalTheme: modalTheme ?? this.modalTheme, - opacity: opacity ?? this.opacity, popoverTheme: popoverTheme ?? this.popoverTheme, radioTheme: radioTheme ?? this.radioTheme, segmentedControlTheme: segmentedControlTheme ?? this.segmentedControlTheme, - shadows: shadows ?? this.shadows, - sizes: sizes ?? this.sizes, switchTheme: switchTheme ?? this.switchTheme, tabBarTheme: tabBarTheme ?? this.tabBarTheme, tagTheme: tagTheme ?? this.tagTheme, @@ -322,7 +240,6 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { textInputTheme: textInputTheme ?? this.textInputTheme, toastTheme: toastTheme ?? this.toastTheme, tooltipTheme: tooltipTheme ?? this.tooltipTheme, - typography: typography ?? this.typography, ); } @@ -331,11 +248,11 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { if (other is! MoonTheme) return this; return MoonTheme( + tokens: tokens.lerp(other.tokens, t), accordionTheme: accordionTheme.lerp(other.accordionTheme, t), alertTheme: alertTheme.lerp(other.alertTheme, t), authCodeTheme: authCodeTheme.lerp(other.authCodeTheme, t), avatarTheme: avatarTheme.lerp(other.avatarTheme, t), - borders: borders.lerp(other.borders, t), bottomSheetTheme: bottomSheetTheme.lerp(other.bottomSheetTheme, t), buttonTheme: buttonTheme.lerp(other.buttonTheme, t), carouselTheme: carouselTheme.lerp(other.carouselTheme, t), @@ -343,20 +260,15 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { chipTheme: chipTheme.lerp(other.chipTheme, t), circularLoaderTheme: circularLoaderTheme.lerp(other.circularLoaderTheme, t), circularProgressTheme: circularProgressTheme.lerp(other.circularProgressTheme, t), - colors: colors.lerp(other.colors, t), dotIndicatorTheme: dotIndicatorTheme.lerp(other.dotIndicatorTheme, t), drawerTheme: drawerTheme.lerp(other.drawerTheme, 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), - opacity: opacity.lerp(other.opacity, t), popoverTheme: popoverTheme.lerp(other.popoverTheme, t), radioTheme: radioTheme.lerp(other.radioTheme, t), segmentedControlTheme: segmentedControlTheme.lerp(other.segmentedControlTheme, t), - shadows: shadows.lerp(other.shadows, t), - sizes: sizes.lerp(other.sizes, t), switchTheme: switchTheme.lerp(other.switchTheme, t), tabBarTheme: tabBarTheme.lerp(other.tabBarTheme, t), tagTheme: tagTheme.lerp(other.tagTheme, t), @@ -364,7 +276,6 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { textInputTheme: textInputTheme.lerp(other.textInputTheme, t), toastTheme: toastTheme.lerp(other.toastTheme, t), tooltipTheme: tooltipTheme.lerp(other.tooltipTheme, t), - typography: typography.lerp(other.typography, t), ); } @@ -373,58 +284,44 @@ class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTheme")) + ..add(DiagnosticsProperty("MoonTokens", tokens)) ..add(DiagnosticsProperty("MoonAccordionTheme", accordionTheme)) ..add(DiagnosticsProperty("MoonAlertTheme", alertTheme)) ..add(DiagnosticsProperty("MoonAuthCodeTheme", authCodeTheme)) ..add(DiagnosticsProperty("MoonAvatarTheme", avatarTheme)) - ..add(DiagnosticsProperty("MoonBorders", borders)) ..add(DiagnosticsProperty("MoonButtonTheme", buttonTheme)) ..add(DiagnosticsProperty("MoonCarouselTheme", carouselTheme)) ..add(DiagnosticsProperty("MoonCheckboxTheme", checkboxTheme)) ..add(DiagnosticsProperty("MoonChipTheme", chipTheme)) ..add(DiagnosticsProperty("MoonCircularLoaderTheme", circularLoaderTheme)) ..add(DiagnosticsProperty("MoonCircularProgressTheme", circularProgressTheme)) - ..add(DiagnosticsProperty("MoonColors", colors)) ..add(DiagnosticsProperty("MoonDotIndicatorTheme", dotIndicatorTheme)) ..add(DiagnosticsProperty("MoonDrawerTheme", drawerTheme)) - ..add(DiagnosticsProperty("MoonEffects", effects)) - ..add(DiagnosticsProperty("MoonIconTheme", iconTheme)) + ..add(DiagnosticsProperty("MoonEffectsTheme", effects)) ..add(DiagnosticsProperty("MoonLinearLoaderTheme", linearLoaderTheme)) ..add(DiagnosticsProperty("MoonLinearProgressTheme", linearProgressTheme)) ..add(DiagnosticsProperty("MoonModalTheme", modalTheme)) - ..add(DiagnosticsProperty("MoonOpacity", opacity)) ..add(DiagnosticsProperty("MoonPopoverTheme", popoverTheme)) ..add(DiagnosticsProperty("MoonRadioTheme", radioTheme)) ..add(DiagnosticsProperty("MoonSegmentedControlTheme", segmentedControlTheme)) - ..add(DiagnosticsProperty("MoonShadows", shadows)) - ..add(DiagnosticsProperty("MoonSizes", sizes)) ..add(DiagnosticsProperty("MoonSwitchTheme", switchTheme)) ..add(DiagnosticsProperty("MoonTabBarTheme", tabBarTheme)) ..add(DiagnosticsProperty("MoonTagTheme", tagTheme)) ..add(DiagnosticsProperty("MoonTextAreaTheme", textAreaTheme)) ..add(DiagnosticsProperty("MoonTextInputTheme", textInputTheme)) ..add(DiagnosticsProperty("MoonToastTheme", toastTheme)) - ..add(DiagnosticsProperty("MoonTooltipTheme", tooltipTheme)) - ..add(DiagnosticsProperty("MoonTypography", typography)); + ..add(DiagnosticsProperty("MoonTooltipTheme", tooltipTheme)); } } extension MoonThemeX on BuildContext { MoonTheme? get moonTheme => Theme.of(this).extension(); - - MoonBorders? get moonBorders => moonTheme?.borders; - - MoonColors? get moonColors => moonTheme?.colors; - - MoonEffects? get moonEffects => moonTheme?.effects; - - MoonIconTheme? get moonIconTheme => moonTheme?.iconTheme; - - MoonOpacity? get moonOpacity => moonTheme?.opacity; - - MoonShadows? get moonShadows => moonTheme?.shadows; - - MoonSizes? get moonSizes => moonTheme?.sizes; - - MoonTypography? get moonTypography => moonTheme?.typography; + MoonBorders? get moonBorders => moonTheme?.tokens.borders; + MoonColors? get moonColors => moonTheme?.tokens.colors; + MoonEffectsTheme? get moonEffects => moonTheme?.effects; + MoonOpacities? get moonOpacities => moonTheme?.tokens.opacities; + MoonShadows? get moonShadows => moonTheme?.tokens.shadows; + MoonSizes? get moonSizes => moonTheme?.tokens.sizes; + MoonTransitions? get moonTransitions => moonTheme?.tokens.transitions; + MoonTypography? get moonTypography => moonTheme?.tokens.typography; } diff --git a/lib/src/theme/toast/toast_colors.dart b/lib/src/theme/toast/toast_colors.dart index 7eb7cd43..7d4c304c 100644 --- a/lib/src/theme/toast/toast_colors.dart +++ b/lib/src/theme/toast/toast_colors.dart @@ -1,31 +1,10 @@ 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'; @immutable class MoonToastColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonToastColors( - lightVariantBackgroundColor: MoonColors.light.gohan, - 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( - lightVariantBackgroundColor: MoonColors.dark.gohan, - 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. final Color lightVariantBackgroundColor; diff --git a/lib/src/theme/toast/toast_properties.dart b/lib/src/theme/toast/toast_properties.dart index 4f1976e0..868f8f63 100644 --- a/lib/src/theme/toast/toast_properties.dart +++ b/lib/src/theme/toast/toast_properties.dart @@ -3,22 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonToastProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonToastProperties( - borderRadius: MoonBorders.borders.surfaceSm, - gap: MoonSizes.sizes.x2s, - displayDuration: const Duration(seconds: 5), - transitionDuration: const Duration(milliseconds: 200), - transitionCurve: Curves.easeInOutCubic, - contentPadding: EdgeInsets.all(MoonSizes.sizes.x2s), - textStyle: MoonTextStyles.body.textDefault, - ); - /// Toast border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/toast/toast_shadows.dart b/lib/src/theme/toast/toast_shadows.dart index 227aaf87..1be51009 100644 --- a/lib/src/theme/toast/toast_shadows.dart +++ b/lib/src/theme/toast/toast_shadows.dart @@ -1,18 +1,8 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/shadows.dart'; - @immutable class MoonToastShadows extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonToastShadows( - toastShadows: MoonShadows.light.lg, - ); - - static final dark = MoonToastShadows( - toastShadows: MoonShadows.dark.lg, - ); - /// Toast shadows. final List toastShadows; diff --git a/lib/src/theme/toast/toast_theme.dart b/lib/src/theme/toast/toast_theme.dart index babcae1a..af1c922e 100644 --- a/lib/src/theme/toast/toast_theme.dart +++ b/lib/src/theme/toast/toast_theme.dart @@ -4,20 +4,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/toast/toast_colors.dart'; import 'package:moon_design/src/theme/toast/toast_properties.dart'; import 'package:moon_design/src/theme/toast/toast_shadows.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonToastTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonToastTheme( - colors: MoonToastColors.light, - properties: MoonToastProperties.properties, - shadows: MoonToastShadows.light, - ); - - static final dark = MoonToastTheme( - colors: MoonToastColors.dark, - properties: MoonToastProperties.properties, - shadows: MoonToastShadows.dark, - ); + /// MDS tokens. + final MoonTokens tokens; /// Toast colors. final MoonToastColors colors; @@ -28,19 +20,41 @@ class MoonToastTheme extends ThemeExtension with DiagnosticableT /// Toast shadows. final MoonToastShadows shadows; - const MoonToastTheme({ - required this.colors, - required this.properties, - required this.shadows, - }); + MoonToastTheme({ + required this.tokens, + MoonToastColors? colors, + MoonToastProperties? properties, + MoonToastShadows? shadows, + }) : colors = colors ?? + MoonToastColors( + lightVariantBackgroundColor: tokens.colors.gohan, + darkVariantBackgroundColor: tokens.complementaryColors.gohan, + lightVariantTextColor: tokens.colors.bulma, + darkVariantTextColor: tokens.complementaryColors.bulma, + lightVariantIconColor: tokens.colors.bulma, + darkVariantIconColor: tokens.complementaryColors.bulma, + ), + properties = properties ?? + MoonToastProperties( + borderRadius: tokens.borders.surfaceSm, + gap: tokens.sizes.x2s, + displayDuration: const Duration(seconds: 5), + transitionDuration: tokens.transitions.defaultTransitionDuration, + transitionCurve: tokens.transitions.defaultTransitionCurve, + contentPadding: EdgeInsets.all(tokens.sizes.x2s), + textStyle: tokens.typography.body.textDefault, + ), + shadows = shadows ?? MoonToastShadows(toastShadows: tokens.shadows.lg); @override MoonToastTheme copyWith({ + MoonTokens? tokens, MoonToastColors? colors, MoonToastProperties? properties, MoonToastShadows? shadows, }) { return MoonToastTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, @@ -52,6 +66,7 @@ class MoonToastTheme extends ThemeExtension with DiagnosticableT if (other is! MoonToastTheme) return this; return MoonToastTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), @@ -63,6 +78,7 @@ class MoonToastTheme extends ThemeExtension with DiagnosticableT super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonToastTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("shadows", shadows)); diff --git a/lib/src/theme/borders.dart b/lib/src/theme/tokens/borders.dart similarity index 100% rename from lib/src/theme/borders.dart rename to lib/src/theme/tokens/borders.dart diff --git a/lib/src/theme/colors.dart b/lib/src/theme/tokens/colors.dart similarity index 88% rename from lib/src/theme/colors.dart rename to lib/src/theme/tokens/colors.dart index 3d888305..2a3fa9ae 100644 --- a/lib/src/theme/colors.dart +++ b/lib/src/theme/tokens/colors.dart @@ -8,11 +8,11 @@ class MoonColors extends ThemeExtension with DiagnosticableTreeMixin static const light = MoonColors( piccolo: Color(0xFF4E46B4), hit: Color(0xFF40A69F), - beerus: Color(0xFFEBEBEB), + beerus: Color(0xFFE2E2E2), goku: Color(0xFFF5F5F5), gohan: Color(0xFFFFFFFF), bulma: Color(0xFF000000), - trunks: Color(0xFF999CA0), + trunks: Color(0xFF595D62), goten: Color(0xFFFFFFFF), popo: Color(0xFF000000), jiren: Color(0x1F4E46B4), @@ -45,6 +45,10 @@ class MoonColors extends ThemeExtension with DiagnosticableTreeMixin whis100: Color(0xFF3448F0), whis60: Color(0x8F3448F0), whis10: Color(0x143448F0), + textPrimary: Color(0xFF000000), // bulma + textSecondary: Color(0xFF595D62), // trunks + iconPrimary: Color(0xFF000000), // bulma + iconSecondary: Color(0xFF595D62), // trunks ); static const dark = MoonColors( @@ -87,6 +91,10 @@ class MoonColors extends ThemeExtension with DiagnosticableTreeMixin whis100: Color(0xFF3448F0), whis60: Color(0x8F3448F0), whis10: Color(0x143448F0), + textPrimary: Color(0xFFFFFFFF), // bulma + textSecondary: Color(0xFF999CA0), // trunks + iconPrimary: Color(0xFFFFFFFF), // bulma + iconSecondary: Color(0xFF999CA0), //trunks ); // Main colors: @@ -210,6 +218,18 @@ class MoonColors extends ThemeExtension with DiagnosticableTreeMixin /// Supportive color. final Color whis10; + /// Primary text color. + final Color textPrimary; + + /// Secondary text color. + final Color textSecondary; + + /// Primary icon color. + final Color iconPrimary; + + /// Primary icon color. + final Color iconSecondary; + const MoonColors({ required this.piccolo, required this.hit, @@ -250,6 +270,10 @@ class MoonColors extends ThemeExtension with DiagnosticableTreeMixin required this.whis100, required this.whis60, required this.whis10, + required this.textPrimary, + required this.textSecondary, + required this.iconPrimary, + required this.iconSecondary, }); @override @@ -293,6 +317,10 @@ class MoonColors extends ThemeExtension with DiagnosticableTreeMixin Color? whis100, Color? whis60, Color? whis10, + Color? textPrimary, + Color? textSecondary, + Color? iconPrimary, + Color? iconSecondary, }) { return MoonColors( piccolo: piccolo ?? this.piccolo, @@ -334,6 +362,10 @@ class MoonColors extends ThemeExtension with DiagnosticableTreeMixin whis100: whis100 ?? this.whis100, whis60: whis60 ?? this.whis60, whis10: whis10 ?? this.whis10, + textPrimary: textPrimary ?? this.textPrimary, + textSecondary: textSecondary ?? this.textSecondary, + iconPrimary: iconPrimary ?? this.iconPrimary, + iconSecondary: iconSecondary ?? this.iconSecondary, ); } @@ -381,6 +413,10 @@ class MoonColors extends ThemeExtension with DiagnosticableTreeMixin whis100: colorPremulLerp(whis100, other.whis100, t)!, whis60: colorPremulLerp(whis60, other.whis60, t)!, whis10: colorPremulLerp(whis10, other.whis10, t)!, + textPrimary: colorPremulLerp(textPrimary, other.textPrimary, t)!, + textSecondary: colorPremulLerp(textSecondary, other.textSecondary, t)!, + iconPrimary: colorPremulLerp(iconPrimary, other.iconPrimary, t)!, + iconSecondary: colorPremulLerp(iconSecondary, other.iconSecondary, t)!, ); } @@ -427,6 +463,10 @@ class MoonColors extends ThemeExtension with DiagnosticableTreeMixin ..add(ColorProperty("nappa10", nappa10)) ..add(ColorProperty("whis100", whis100)) ..add(ColorProperty("whis60", whis60)) - ..add(ColorProperty("whis10", whis10)); + ..add(ColorProperty("whis10", whis10)) + ..add(ColorProperty("textPrimary", textPrimary)) + ..add(ColorProperty("textSecondary", textSecondary)) + ..add(ColorProperty("iconPrimary", iconPrimary)) + ..add(ColorProperty("iconSecondary", iconSecondary)); } } diff --git a/lib/src/theme/opacity.dart b/lib/src/theme/tokens/opacities.dart similarity index 57% rename from lib/src/theme/opacity.dart rename to lib/src/theme/tokens/opacities.dart index 620d5ce0..28cd6fab 100644 --- a/lib/src/theme/opacity.dart +++ b/lib/src/theme/tokens/opacities.dart @@ -4,30 +4,30 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable -class MoonOpacity extends ThemeExtension with DiagnosticableTreeMixin { - static const opacities = MoonOpacity(disabled: 0.6); +class MoonOpacities extends ThemeExtension with DiagnosticableTreeMixin { + static const opacities = MoonOpacities(disabled: 0.6); /// Disabled opacity value. final double disabled; - const MoonOpacity({ + const MoonOpacities({ required this.disabled, }); @override - MoonOpacity copyWith({ + MoonOpacities copyWith({ double? disabled, }) { - return MoonOpacity( + return MoonOpacities( disabled: disabled ?? this.disabled, ); } @override - MoonOpacity lerp(ThemeExtension? other, double t) { - if (other is! MoonOpacity) return this; + MoonOpacities lerp(ThemeExtension? other, double t) { + if (other is! MoonOpacities) return this; - return MoonOpacity( + return MoonOpacities( disabled: lerpDouble(disabled, other.disabled, t)!, ); } @@ -36,7 +36,7 @@ class MoonOpacity extends ThemeExtension with DiagnosticableTreeMix void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties - ..add(DiagnosticsProperty("type", "MoonOpacity")) + ..add(DiagnosticsProperty("type", "MoonOpacities")) ..add(DoubleProperty("disabled", disabled)); } } diff --git a/lib/src/theme/shadows.dart b/lib/src/theme/tokens/shadows.dart similarity index 100% rename from lib/src/theme/shadows.dart rename to lib/src/theme/tokens/shadows.dart diff --git a/lib/src/theme/sizes.dart b/lib/src/theme/tokens/sizes.dart similarity index 100% rename from lib/src/theme/sizes.dart rename to lib/src/theme/tokens/sizes.dart diff --git a/lib/src/theme/tokens/tokens.dart b/lib/src/theme/tokens/tokens.dart new file mode 100644 index 00000000..35e5a838 --- /dev/null +++ b/lib/src/theme/tokens/tokens.dart @@ -0,0 +1,123 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import 'package:moon_design/src/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/opacities.dart'; +import 'package:moon_design/src/theme/tokens/shadows.dart'; +import 'package:moon_design/src/theme/tokens/sizes.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; + +@immutable +class MoonTokens extends ThemeExtension with DiagnosticableTreeMixin { + static const light = MoonTokens( + borders: MoonBorders.borders, + colors: MoonColors.light, + complementaryColors: MoonColors.dark, + opacities: MoonOpacities.opacities, + shadows: MoonShadows.light, + sizes: MoonSizes.sizes, + transitions: MoonTransitions.transitions, + typography: MoonTypography.typography, + ); + + static const dark = MoonTokens( + borders: MoonBorders.borders, + colors: MoonColors.dark, + complementaryColors: MoonColors.light, + opacities: MoonOpacities.opacities, + shadows: MoonShadows.dark, + sizes: MoonSizes.sizes, + transitions: MoonTransitions.transitions, + typography: MoonTypography.typography, + ); + + /// Moon Design System borders. + final MoonBorders borders; + + /// Moon Design System colors. + final MoonColors colors; + + /// Moon Design System colors that are from complementary theme (light -> dark, dark -> light). + final MoonColors complementaryColors; + + /// Moon Design System opacities. + final MoonOpacities opacities; + + /// Moon Design System shadows. + final MoonShadows shadows; + + /// Moon Design System sizes. + final MoonSizes sizes; + + final MoonTransitions transitions; + + /// Moon Design System typography. + final MoonTypography typography; + + const MoonTokens({ + required this.borders, + required this.colors, + required this.complementaryColors, + required this.opacities, + required this.shadows, + required this.sizes, + required this.transitions, + required this.typography, + }); + + @override + MoonTokens copyWith({ + MoonBorders? borders, + MoonColors? colors, + MoonColors? complementaryColors, + MoonOpacities? opacities, + MoonShadows? shadows, + MoonSizes? sizes, + MoonTransitions? transitions, + MoonTypography? typography, + }) { + return MoonTokens( + borders: borders ?? this.borders, + colors: colors ?? this.colors, + complementaryColors: complementaryColors ?? this.complementaryColors, + opacities: opacities ?? this.opacities, + shadows: shadows ?? this.shadows, + sizes: sizes ?? this.sizes, + transitions: transitions ?? this.transitions, + typography: typography ?? this.typography, + ); + } + + @override + MoonTokens lerp(ThemeExtension? other, double t) { + if (other is! MoonTokens) return this; + + return MoonTokens( + borders: borders.lerp(other.borders, t), + colors: colors.lerp(other.colors, t), + complementaryColors: complementaryColors.lerp(other.complementaryColors, t), + opacities: opacities.lerp(other.opacities, t), + shadows: shadows.lerp(other.shadows, t), + sizes: sizes.lerp(other.sizes, t), + transitions: transitions.lerp(other.transitions, t), + typography: typography.lerp(other.typography, t), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonTokens")) + ..add(DiagnosticsProperty("MoonBorders", borders)) + ..add(DiagnosticsProperty("MoonColors", colors)) + ..add(DiagnosticsProperty("MoonColors", complementaryColors)) + ..add(DiagnosticsProperty("MoonOpacities", opacities)) + ..add(DiagnosticsProperty("MoonShadows", shadows)) + ..add(DiagnosticsProperty("MoonSizes", sizes)) + ..add(DiagnosticsProperty("MoonTransitions", transitions)) + ..add(DiagnosticsProperty("MoonTypography", typography)); + } +} diff --git a/lib/src/theme/tokens/transitions.dart b/lib/src/theme/tokens/transitions.dart new file mode 100644 index 00000000..da451e9f --- /dev/null +++ b/lib/src/theme/tokens/transitions.dart @@ -0,0 +1,51 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +@immutable +class MoonTransitions extends ThemeExtension with DiagnosticableTreeMixin { + static const transitions = MoonTransitions( + defaultTransitionDuration: Duration(milliseconds: 200), + defaultTransitionCurve: Curves.easeInOutCubic, + ); + + /// Default transition duration. + final Duration defaultTransitionDuration; + + /// Default transition curve. + final Curve defaultTransitionCurve; + + const MoonTransitions({ + required this.defaultTransitionDuration, + required this.defaultTransitionCurve, + }); + + @override + MoonTransitions copyWith({ + Duration? defaultTransitionDuration, + Curve? defaultTransitionCurve, + }) { + return MoonTransitions( + defaultTransitionDuration: defaultTransitionDuration ?? this.defaultTransitionDuration, + defaultTransitionCurve: defaultTransitionCurve ?? this.defaultTransitionCurve, + ); + } + + @override + MoonTransitions lerp(ThemeExtension? other, double t) { + if (other is! MoonTransitions) return this; + + return MoonTransitions( + defaultTransitionDuration: lerpDuration(defaultTransitionDuration, other.defaultTransitionDuration, t), + defaultTransitionCurve: other.defaultTransitionCurve, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty("type", "MoonTransitions")) + ..add(DiagnosticsProperty("defaultTransitionDuration", defaultTransitionDuration)) + ..add(DiagnosticsProperty("defaultTransitionCurve", defaultTransitionCurve)); + } +} diff --git a/lib/src/theme/typography/text_styles.dart b/lib/src/theme/tokens/typography/text_styles.dart similarity index 77% rename from lib/src/theme/typography/text_styles.dart rename to lib/src/theme/tokens/typography/text_styles.dart index 9bc694a6..c77a07e5 100644 --- a/lib/src/theme/typography/text_styles.dart +++ b/lib/src/theme/tokens/typography/text_styles.dart @@ -1,3 +1,5 @@ +import 'dart:ui'; + import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @@ -306,6 +308,83 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT required this.text72, }); + /// Creates a copy of this text theme but with the given field replaced in each of the individual text styles. + MoonTextStyles apply({ + Color? backgroundColor, + Color? color, + Color? decorationColor, + double decorationThicknessDelta = 0.0, + double decorationThicknessFactor = 1.0, + double fontSizeDelta = 0.0, + double fontSizeFactor = 1.0, + double heightDelta = 0.0, + double heightFactor = 1.0, + double letterSpacingDelta = 0.0, + double letterSpacingFactor = 1.0, + FontStyle? fontStyle, + int fontWeightDelta = 0, + List? fontFeatures, + List? fontVariations, + List? shadows, + List? fontFamilyFallback, + Locale? locale, + String? fontFamily, + String? package, + TextBaseline? textBaseline, + TextDecoration? decoration, + TextDecorationStyle? decorationStyle, + TextLeadingDistribution? leadingDistribution, + TextOverflow? overflow, + }) { + TextStyle applyProps(TextStyle style) => style.apply( + backgroundColor: backgroundColor, + decorationThicknessDelta: decorationThicknessDelta, + decorationThicknessFactor: decorationThicknessFactor, + color: color, + decorationColor: decorationColor, + fontSizeDelta: fontSizeDelta, + fontSizeFactor: fontSizeFactor, + heightDelta: heightDelta, + heightFactor: heightFactor, + letterSpacingDelta: letterSpacingDelta, + letterSpacingFactor: letterSpacingFactor, + fontFeatures: fontFeatures, + fontStyle: fontStyle, + fontWeightDelta: fontWeightDelta, + fontVariations: fontVariations, + shadows: shadows, + fontFamilyFallback: fontFamilyFallback, + locale: locale, + fontFamily: fontFamily, + package: package, + textBaseline: textBaseline, + decoration: decoration, + decorationStyle: decorationStyle, + leadingDistribution: leadingDistribution, + overflow: overflow, + ); + + return MoonTextStyles( + textDefault: applyProps(textDefault), + text6: applyProps(text6), + text8: applyProps(text8), + text9: applyProps(text9), + text10: applyProps(text10), + text12: applyProps(text12), + text14: applyProps(text14), + text16: applyProps(text16), + text18: applyProps(text18), + text20: applyProps(text20), + text24: applyProps(text24), + text32: applyProps(text32), + text40: applyProps(text40), + text48: applyProps(text48), + text56: applyProps(text56), + text64: applyProps(text64), + text72: applyProps(text72), + ); + } + @override MoonTextStyles copyWith({ TextStyle? textDefault, diff --git a/lib/src/theme/typography/typography.dart b/lib/src/theme/tokens/typography/typography.dart similarity index 64% rename from lib/src/theme/typography/typography.dart rename to lib/src/theme/tokens/typography/typography.dart index 420598c5..3724a10f 100644 --- a/lib/src/theme/typography/typography.dart +++ b/lib/src/theme/tokens/typography/typography.dart @@ -1,48 +1,41 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/typography/text_colors.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; +import 'package:moon_design/src/theme/tokens/typography/text_styles.dart'; @immutable class MoonTypography extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTypography( + static const typography = MoonTypography( body: MoonTextStyles.body, + caption: MoonTextStyles.caption, heading: MoonTextStyles.heading, - colors: MoonTextColors.light, - ); - - static final dark = MoonTypography( - body: MoonTextStyles.body, - heading: MoonTextStyles.heading, - colors: MoonTextColors.dark, ); /// Styles for body text. final MoonTextStyles body; + /// Styles for caption text. + final MoonTextStyles caption; + /// Styles for headings. final MoonTextStyles heading; - /// Colors for body and icons. - final MoonTextColors colors; - const MoonTypography({ required this.body, + required this.caption, required this.heading, - required this.colors, }); @override MoonTypography copyWith({ MoonTextStyles? body, + MoonTextStyles? caption, MoonTextStyles? heading, - MoonTextColors? colors, }) { return MoonTypography( body: body ?? this.body, + caption: caption ?? this.caption, heading: heading ?? this.heading, - colors: colors ?? this.colors, ); } @@ -52,8 +45,8 @@ class MoonTypography extends ThemeExtension with DiagnosticableT return MoonTypography( body: body.lerp(other.body, t), + caption: caption.lerp(other.caption, t), heading: heading.lerp(other.heading, t), - colors: colors.lerp(other.colors, t), ); } @@ -63,7 +56,7 @@ class MoonTypography extends ThemeExtension with DiagnosticableT properties ..add(DiagnosticsProperty("type", "MoonTypography")) ..add(DiagnosticsProperty("body", body)) - ..add(DiagnosticsProperty("heading", heading)) - ..add(DiagnosticsProperty("colors", colors)); + ..add(DiagnosticsProperty("caption", caption)) + ..add(DiagnosticsProperty("heading", heading)); } } diff --git a/lib/src/theme/tooltip/tooltip_colors.dart b/lib/src/theme/tooltip/tooltip_colors.dart index 95705cb1..00f9fba6 100644 --- a/lib/src/theme/tooltip/tooltip_colors.dart +++ b/lib/src/theme/tooltip/tooltip_colors.dart @@ -1,25 +1,10 @@ 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; diff --git a/lib/src/theme/tooltip/tooltip_properties.dart b/lib/src/theme/tooltip/tooltip_properties.dart index b255fb32..eb9b5122 100644 --- a/lib/src/theme/tooltip/tooltip_properties.dart +++ b/lib/src/theme/tooltip/tooltip_properties.dart @@ -3,23 +3,8 @@ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/sizes.dart'; -import 'package:moon_design/src/theme/typography/text_styles.dart'; - @immutable class MoonTooltipProperties extends ThemeExtension with DiagnosticableTreeMixin { - static final properties = MoonTooltipProperties( - borderRadius: MoonBorders.borders.interactiveXs, - arrowBaseWidth: MoonSizes.sizes.x2s, - arrowLength: MoonSizes.sizes.x4s, - arrowTipDistance: MoonSizes.sizes.x4s, - transitionDuration: const Duration(milliseconds: 150), - transitionCurve: Curves.easeInOutCubic, - contentPadding: EdgeInsets.all(MoonSizes.sizes.x3s), - textStyle: MoonTextStyles.body.text12, - ); - /// Tooltip border radius. final BorderRadiusGeometry borderRadius; diff --git a/lib/src/theme/tooltip/tooltip_shadows.dart b/lib/src/theme/tooltip/tooltip_shadows.dart index c2d02ff8..b586ca79 100644 --- a/lib/src/theme/tooltip/tooltip_shadows.dart +++ b/lib/src/theme/tooltip/tooltip_shadows.dart @@ -1,18 +1,8 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/shadows.dart'; - @immutable class MoonTooltipShadows extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTooltipShadows( - tooltipShadows: MoonShadows.light.sm, - ); - - static final dark = MoonTooltipShadows( - tooltipShadows: MoonShadows.dark.sm, - ); - /// Tooltip shadows. final List tooltipShadows; diff --git a/lib/src/theme/tooltip/tooltip_theme.dart b/lib/src/theme/tooltip/tooltip_theme.dart index 002efac4..16d71903 100644 --- a/lib/src/theme/tooltip/tooltip_theme.dart +++ b/lib/src/theme/tooltip/tooltip_theme.dart @@ -1,23 +1,15 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/theme/tooltip/tooltip_colors.dart'; import 'package:moon_design/src/theme/tooltip/tooltip_properties.dart'; import 'package:moon_design/src/theme/tooltip/tooltip_shadows.dart'; @immutable class MoonTooltipTheme extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTooltipTheme( - colors: MoonTooltipColors.light, - properties: MoonTooltipProperties.properties, - shadows: MoonTooltipShadows.light, - ); - - static final dark = MoonTooltipTheme( - colors: MoonTooltipColors.dark, - properties: MoonTooltipProperties.properties, - shadows: MoonTooltipShadows.dark, - ); + /// MDS tokens. + final MoonTokens tokens; /// Tooltip colors. final MoonTooltipColors colors; @@ -28,19 +20,39 @@ class MoonTooltipTheme extends ThemeExtension with Diagnostica /// Tooltip shadows. final MoonTooltipShadows shadows; - const MoonTooltipTheme({ - required this.colors, - required this.properties, - required this.shadows, - }); + MoonTooltipTheme({ + required this.tokens, + MoonTooltipColors? colors, + MoonTooltipProperties? properties, + MoonTooltipShadows? shadows, + }) : colors = colors ?? + MoonTooltipColors( + textColor: tokens.colors.textPrimary, + iconColor: tokens.colors.iconPrimary, + backgroundColor: tokens.colors.gohan, + ), + properties = properties ?? + MoonTooltipProperties( + borderRadius: tokens.borders.interactiveXs, + arrowBaseWidth: tokens.sizes.x2s, + arrowLength: tokens.sizes.x4s, + arrowTipDistance: tokens.sizes.x4s, + transitionDuration: const Duration(milliseconds: 150), + transitionCurve: tokens.transitions.defaultTransitionCurve, + contentPadding: EdgeInsets.all(tokens.sizes.x3s), + textStyle: tokens.typography.body.text12, + ), + shadows = shadows ?? MoonTooltipShadows(tooltipShadows: tokens.shadows.sm); @override MoonTooltipTheme copyWith({ + MoonTokens? tokens, MoonTooltipColors? colors, MoonTooltipProperties? properties, MoonTooltipShadows? shadows, }) { return MoonTooltipTheme( + tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, @@ -52,6 +64,7 @@ class MoonTooltipTheme extends ThemeExtension with Diagnostica if (other is! MoonTooltipTheme) return this; return MoonTooltipTheme( + tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), @@ -63,6 +76,7 @@ class MoonTooltipTheme extends ThemeExtension with Diagnostica super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonTooltipTheme")) + ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("shadows", shadows)); diff --git a/lib/src/theme/typography/text_colors.dart b/lib/src/theme/typography/text_colors.dart deleted file mode 100644 index 562b8ce5..00000000 --- a/lib/src/theme/typography/text_colors.dart +++ /dev/null @@ -1,79 +0,0 @@ -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 MoonTextColors extends ThemeExtension with DiagnosticableTreeMixin { - static final light = MoonTextColors( - bodyPrimary: MoonColors.light.bulma, - bodySecondary: MoonColors.light.trunks, - controlPrimary: MoonColors.light.goten, - controlSecondary: MoonColors.light.popo, - ); - - static final dark = MoonTextColors( - bodyPrimary: MoonColors.dark.bulma, - bodySecondary: MoonColors.dark.trunks, - controlPrimary: MoonColors.dark.goten, - controlSecondary: MoonColors.dark.popo, - ); - - /// Primary body text color. - final Color bodyPrimary; - - /// Primary body text color. - final Color bodySecondary; - - /// Primary control element (button, chip, etc) text color. - final Color controlPrimary; - - /// Secondary control element (button, chip, etc) text color. - final Color controlSecondary; - - const MoonTextColors({ - required this.bodyPrimary, - required this.bodySecondary, - required this.controlPrimary, - required this.controlSecondary, - }); - - @override - MoonTextColors copyWith({ - Color? bodyPrimary, - Color? bodySecondary, - Color? controlPrimary, - Color? controlSecondary, - }) { - return MoonTextColors( - bodyPrimary: bodyPrimary ?? this.bodyPrimary, - bodySecondary: bodySecondary ?? this.bodySecondary, - controlPrimary: controlPrimary ?? this.controlPrimary, - controlSecondary: controlSecondary ?? this.controlSecondary, - ); - } - - @override - MoonTextColors lerp(ThemeExtension? other, double t) { - if (other is! MoonTextColors) return this; - - return MoonTextColors( - bodyPrimary: colorPremulLerp(bodyPrimary, other.bodyPrimary, t)!, - bodySecondary: colorPremulLerp(bodySecondary, other.bodySecondary, t)!, - controlPrimary: colorPremulLerp(controlPrimary, other.controlPrimary, t)!, - controlSecondary: colorPremulLerp(controlSecondary, other.controlSecondary, t)!, - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty("type", "MoonTextColors")) - ..add(ColorProperty("bodyPrimary", bodyPrimary)) - ..add(ColorProperty("bodySecondary", bodySecondary)) - ..add(ColorProperty("controlPrimary", controlPrimary)) - ..add(ColorProperty("controlSecondary", controlSecondary)); - } -} diff --git a/lib/src/widgets/accordion/accordion_item.dart b/lib/src/widgets/accordion/accordion.dart similarity index 80% rename from lib/src/widgets/accordion/accordion_item.dart rename to lib/src/widgets/accordion/accordion.dart index 2b871747..163d92bf 100644 --- a/lib/src/widgets/accordion/accordion_item.dart +++ b/lib/src/widgets/accordion/accordion.dart @@ -1,12 +1,13 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/accordion/accordion_item_size_properties.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/effects/hover_effects.dart'; -import 'package:moon_design/src/theme/shadows.dart'; +import 'package:moon_design/src/theme/accordion/accordion_size_properties.dart'; +import 'package:moon_design/src/theme/accordion/accordion_sizes.dart'; +import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/shadows.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -14,14 +15,14 @@ import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; import 'package:moon_design/src/widgets/common/icons/icons.dart'; import 'package:moon_design/src/widgets/common/icons/moon_icon.dart'; -enum MoonAccordionItemSize { +enum MoonAccordionSize { sm, md, lg, xl, } -class MoonAccordionItem extends StatefulWidget { +class MoonAccordion extends StatefulWidget { /// Specifies the alignment of [children], which are arranged in a column when /// the accordion is expanded. /// The internals of the expanded accordion make use of a [Column] widget for @@ -140,7 +141,7 @@ class MoonAccordionItem extends StatefulWidget { final List? shadows; /// The size of the accordion. - final MoonAccordionItemSize? accordionSize; + final MoonAccordionSize? accordionSize; /// The semantic title for the accordion. final String? semanticLabel; @@ -178,7 +179,7 @@ class MoonAccordionItem extends StatefulWidget { final List children; /// MDS accordion widget. - const MoonAccordionItem({ + const MoonAccordion({ super.key, this.expandedAlignment, this.expandedCrossAxisAlignment, @@ -226,17 +227,17 @@ class MoonAccordionItem extends StatefulWidget { bool get _selected => identityValue != null && identityValue == groupIdentityValue; @override - State> createState() => _MoonAccordionItemState(); + State> createState() => _MoonAccordionState(); } -class _MoonAccordionItemState extends State> with TickerProviderStateMixin { +class _MoonAccordionState extends State> with TickerProviderStateMixin { static final Animatable _halfTween = Tween(begin: 0.0, end: 0.5); late final Map> _actions = { ActivateIntent: CallbackAction(onInvoke: (_) => _handleTap()) }; - late MoonAccordionItemSizeProperties _effectiveMoonAccordionSize; + late MoonAccordionSizeProperties _effectiveMoonAccordionSize; late BorderRadiusGeometry _effectiveBorderRadius; late EdgeInsetsGeometry _effectiveHeaderPadding; late EdgeInsets _resolvedDirectionalHeaderPadding; @@ -317,21 +318,21 @@ class _MoonAccordionItemState extends State> with Ticker widget.onExpansionChanged?.call(_isExpanded ? widget.identityValue : null); } - MoonAccordionItemSizeProperties _getMoonAccordionItemSize( + MoonAccordionSizeProperties _getMoonAccordionSize( BuildContext context, - MoonAccordionItemSize? moonAccordionItemSize, + MoonAccordionSize? moonAccordionSize, ) { - switch (moonAccordionItemSize) { - case MoonAccordionItemSize.sm: - return context.moonTheme?.accordionTheme.itemSizes.sm ?? MoonAccordionItemSizeProperties.sm; - case MoonAccordionItemSize.md: - return context.moonTheme?.accordionTheme.itemSizes.md ?? MoonAccordionItemSizeProperties.md; - case MoonAccordionItemSize.lg: - return context.moonTheme?.accordionTheme.itemSizes.lg ?? MoonAccordionItemSizeProperties.lg; - case MoonAccordionItemSize.xl: - return context.moonTheme?.accordionTheme.itemSizes.xl ?? MoonAccordionItemSizeProperties.xl; + switch (moonAccordionSize) { + case MoonAccordionSize.sm: + return context.moonTheme?.accordionTheme.sizes.sm ?? MoonAccordionSizes(tokens: MoonTokens.light).sm; + case MoonAccordionSize.md: + return context.moonTheme?.accordionTheme.sizes.md ?? MoonAccordionSizes(tokens: MoonTokens.light).md; + case MoonAccordionSize.lg: + return context.moonTheme?.accordionTheme.sizes.lg ?? MoonAccordionSizes(tokens: MoonTokens.light).lg; + case MoonAccordionSize.xl: + return context.moonTheme?.accordionTheme.sizes.xl ?? MoonAccordionSizes(tokens: MoonTokens.light).xl; default: - return context.moonTheme?.accordionTheme.itemSizes.md ?? MoonAccordionItemSizeProperties.md; + return context.moonTheme?.accordionTheme.sizes.md ?? MoonAccordionSizes(tokens: MoonTokens.light).md; } } @@ -352,7 +353,7 @@ class _MoonAccordionItemState extends State> with Ticker } @override - void didUpdateWidget(MoonAccordionItem oldWidget) { + void didUpdateWidget(MoonAccordion oldWidget) { super.didUpdateWidget(oldWidget); if (widget.identityValue == null && widget.groupIdentityValue == null) return; @@ -388,15 +389,15 @@ class _MoonAccordionItemState extends State> with Ticker } Widget? _buildIcon(BuildContext context) { - final double iconSize = _getMoonAccordionItemSize(context, widget.accordionSize).iconSizeValue; + final double iconSize = _getMoonAccordionSize(context, widget.accordionSize).iconSizeValue; final Color effectiveTrailingIconColor = widget.trailingColor ?? - context.moonTheme?.accordionTheme.itemColors.trailingIconColor ?? - MoonTypography.light.colors.bodySecondary; + context.moonTheme?.accordionTheme.colors.trailingIconColor ?? + MoonColors.light.textSecondary; final Color effectiveExpandedTrailingIconColor = widget.expandedTrailingColor ?? - context.moonTheme?.accordionTheme.itemColors.expandedTrailingIconColor ?? - MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.accordionTheme.colors.expandedTrailingIconColor ?? + MoonColors.light.textPrimary; _trailingColor ??= _trailingColorTween.animate(_expansionCurvedAnimation!); @@ -418,10 +419,10 @@ class _MoonAccordionItemState extends State> with Ticker Widget _buildHeader({bool isContentOutsideHeader = false, required Widget child}) { final Color effectiveBorderColor = - widget.borderColor ?? context.moonTheme?.accordionTheme.itemColors.borderColor ?? MoonColors.light.beerus; + widget.borderColor ?? context.moonTheme?.accordionTheme.colors.borderColor ?? MoonColors.light.beerus; final List effectiveShadows = - widget.shadows ?? context.moonTheme?.accordionTheme.itemShadows.shadows ?? MoonShadows.light.sm; + widget.shadows ?? context.moonTheme?.accordionTheme.shadows.shadows ?? MoonShadows.light.sm; return RepaintBoundary( child: AnimatedBuilder( @@ -453,9 +454,9 @@ class _MoonAccordionItemState extends State> with Ticker Widget _buildChildren(BuildContext context, Widget? rootChild) { _effectiveHoverEffectColor ??= context.moonEffects?.controlHoverEffect.primaryHoverColor ?? - MoonHoverEffects.lightHoverEffect.primaryHoverColor; + MoonEffectsTheme(tokens: MoonTokens.light).controlHoverEffect.primaryHoverColor; - _effectiveMoonAccordionSize = _getMoonAccordionItemSize(context, widget.accordionSize); + _effectiveMoonAccordionSize = _getMoonAccordionSize(context, widget.accordionSize); _effectiveBorderRadius = widget.borderRadius ?? _effectiveMoonAccordionSize.borderRadius; @@ -465,73 +466,69 @@ class _MoonAccordionItemState extends State> with Ticker _resolvedDirectionalHeaderPadding = _effectiveHeaderPadding.resolve(Directionality.of(context)); - final double effectiveFocusEffectExtent = - context.moonEffects?.controlFocusEffect.effectExtent ?? MoonFocusEffects.lightFocusEffect.effectExtent; + final double effectiveFocusEffectExtent = context.moonEffects?.controlFocusEffect.effectExtent ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectExtent; - final Color effectiveFocusEffectColor = - context.moonEffects?.controlFocusEffect.effectColor ?? MoonFocusEffects.lightFocusEffect.effectColor; + final Color effectiveFocusEffectColor = context.moonEffects?.controlFocusEffect.effectColor ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectColor; - final Duration effectiveFocusEffectDuration = - context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; + final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectDuration; - final Curve effectiveFocusEffectCurve = - context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; + final Curve effectiveFocusEffectCurve = context.moonEffects?.controlFocusEffect.effectCurve ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectCurve; final Color effectiveHoverEffectColor = context.moonEffects?.controlHoverEffect.primaryHoverColor ?? - MoonHoverEffects.lightHoverEffect.primaryHoverColor; + MoonEffectsTheme(tokens: MoonTokens.light).controlHoverEffect.primaryHoverColor; - final Color effectiveBackgroundColor = widget.backgroundColor ?? - context.moonTheme?.accordionTheme.itemColors.backgroundColor ?? - MoonColors.light.gohan; + final Color effectiveBackgroundColor = + widget.backgroundColor ?? context.moonTheme?.accordionTheme.colors.backgroundColor ?? MoonColors.light.gohan; final Color effectiveExpandedBackgroundColor = widget.expandedBackgroundColor ?? - context.moonTheme?.accordionTheme.itemColors.expandedBackgroundColor ?? + context.moonTheme?.accordionTheme.colors.expandedBackgroundColor ?? MoonColors.light.gohan; - final Color effectiveLeadingColor = widget.leadingColor ?? - context.moonTheme?.accordionTheme.itemColors.leadingColor ?? - MoonTypography.light.colors.bodyPrimary; + final Color effectiveLeadingColor = + widget.leadingColor ?? context.moonTheme?.accordionTheme.colors.leadingColor ?? MoonColors.light.textPrimary; final Color effectiveExpandedLeadingColor = widget.expandedLeadingColor ?? - context.moonTheme?.accordionTheme.itemColors.expandedLeadingColor ?? - MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.accordionTheme.colors.expandedLeadingColor ?? + MoonColors.light.textPrimary; - final Color effectiveTitleColor = widget.titleColor ?? - context.moonTheme?.accordionTheme.itemColors.titleColor ?? - MoonTypography.light.colors.bodyPrimary; + final Color effectiveTitleColor = + widget.titleColor ?? context.moonTheme?.accordionTheme.colors.titleColor ?? MoonColors.light.textPrimary; final Color effectiveExpandedTitleColor = widget.expandedTitleColor ?? - context.moonTheme?.accordionTheme.itemColors.expandedTitleColor ?? - MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.accordionTheme.colors.expandedTitleColor ?? + MoonColors.light.textPrimary; - final Color effectiveTrailingColor = widget.trailingColor ?? - context.moonTheme?.accordionTheme.itemColors.trailingColor ?? - MoonTypography.light.colors.bodyPrimary; + final Color effectiveTrailingColor = + widget.trailingColor ?? context.moonTheme?.accordionTheme.colors.trailingColor ?? MoonColors.light.textPrimary; final Color effectiveExpandedTrailingColor = widget.expandedTrailingColor ?? - context.moonTheme?.accordionTheme.itemColors.expandedTrailingColor ?? - MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.accordionTheme.colors.expandedTrailingColor ?? + MoonColors.light.textPrimary; final TextStyle effectiveHeaderTextStyle = _effectiveMoonAccordionSize.headerTextStyle; final Color effectiveContentTextColor = - context.moonTheme?.accordionTheme.itemColors.contentColor ?? MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.accordionTheme.colors.contentColor ?? MoonColors.light.textPrimary; final TextStyle effectiveContentTextStyle = _effectiveMoonAccordionSize.contentTextStyle; - final Duration effectiveHoverEffectDuration = - context.moonEffects?.controlHoverEffect.hoverDuration ?? MoonHoverEffects.lightHoverEffect.hoverDuration; + final Duration effectiveHoverEffectDuration = context.moonEffects?.controlHoverEffect.hoverDuration ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlHoverEffect.hoverDuration; - final Curve effectiveHoverEffectCurve = - context.moonEffects?.controlHoverEffect.hoverCurve ?? MoonHoverEffects.lightHoverEffect.hoverCurve; + final Curve effectiveHoverEffectCurve = context.moonEffects?.controlHoverEffect.hoverCurve ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlHoverEffect.hoverCurve; final Duration effectiveTransitionDuration = widget.transitionDuration ?? - context.moonTheme?.accordionTheme.itemProperties.transitionDuration ?? - const Duration(milliseconds: 200); + context.moonTheme?.accordionTheme.properties.transitionDuration ?? + MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = widget.transitionCurve ?? - context.moonTheme?.accordionTheme.itemProperties.transitionCurve ?? - Curves.easeInOutCubic; + context.moonTheme?.accordionTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; _expansionAnimationController ??= AnimationController(duration: effectiveTransitionDuration, vsync: this); @@ -655,11 +652,11 @@ class _MoonAccordionItemState extends State> with Ticker @override Widget build(BuildContext context) { final Color effectiveDividerColor = - widget.dividerColor ?? context.moonTheme?.accordionTheme.itemColors.dividerColor ?? MoonColors.light.beerus; + widget.dividerColor ?? context.moonTheme?.accordionTheme.colors.dividerColor ?? MoonColors.light.beerus; final Duration effectiveTransitionDuration = widget.transitionDuration ?? - context.moonTheme?.accordionTheme.itemProperties.transitionDuration ?? - const Duration(milliseconds: 200); + context.moonTheme?.accordionTheme.properties.transitionDuration ?? + MoonTransitions.transitions.defaultTransitionDuration; _expansionAnimationController ??= AnimationController(duration: effectiveTransitionDuration, vsync: this); diff --git a/lib/src/widgets/alert/alert.dart b/lib/src/widgets/alert/alert.dart index b20a7fd2..4de66fd0 100644 --- a/lib/src/widgets/alert/alert.dart +++ b/lib/src/widgets/alert/alert.dart @@ -1,12 +1,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_colors.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/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/sizes.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -110,9 +109,9 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix TextStyle _getTitleTextStyle({required BuildContext context}) { if (widget.body != null) { - return context.moonTheme?.alertTheme.properties.titleTextStyle ?? MoonTextStyles.heading.textDefault; + return context.moonTheme?.alertTheme.properties.titleTextStyle ?? MoonTypography.typography.heading.textDefault; } else { - return context.moonTheme?.alertTheme.properties.bodyTextStyle ?? MoonTextStyles.body.textDefault; + return context.moonTheme?.alertTheme.properties.bodyTextStyle ?? MoonTypography.typography.body.textDefault; } } @@ -187,10 +186,10 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix widget.borderColor ?? context.moonTheme?.alertTheme.colors.borderColor ?? MoonColors.light.bulma; final Color effectiveTextColor = - widget.color ?? context.moonTheme?.alertTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + widget.color ?? context.moonTheme?.alertTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveIconColor = - widget.color ?? context.moonTheme?.alertTheme.colors.iconColor ?? MoonIconColors.light.primaryColor; + widget.color ?? context.moonTheme?.alertTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final EdgeInsetsGeometry effectivePadding = widget.padding ?? context.moonTheme?.alertTheme.properties.padding ?? EdgeInsets.all(MoonSizes.sizes.x2s); @@ -198,14 +197,15 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix final TextStyle effectiveTitleTextStyle = _getTitleTextStyle(context: context); final TextStyle effectiveBodyTextStyle = - context.moonTheme?.alertTheme.properties.bodyTextStyle ?? MoonTextStyles.body.textDefault; + context.moonTheme?.alertTheme.properties.bodyTextStyle ?? MoonTypography.typography.body.textDefault; final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.alertTheme.properties.transitionDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; - final Curve effectiveTransitionCurve = - widget.transitionCurve ?? context.moonTheme?.alertTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final Curve effectiveTransitionCurve = widget.transitionCurve ?? + context.moonTheme?.alertTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; _animationController ??= AnimationController( duration: effectiveTransitionDuration, diff --git a/lib/src/widgets/authcode/authcode.dart b/lib/src/widgets/authcode/authcode.dart index 0692148e..589b9c90 100644 --- a/lib/src/widgets/authcode/authcode.dart +++ b/lib/src/widgets/authcode/authcode.dart @@ -4,13 +4,13 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; -import 'package:moon_design/src/theme/borders.dart'; -import 'package:moon_design/src/theme/colors.dart'; -import 'package:moon_design/src/theme/opacity.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/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/opacities.dart'; +import 'package:moon_design/src/theme/tokens/sizes.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -703,37 +703,40 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix _effectiveInactiveFillColor = widget.inactiveFillColor ?? context.moonTheme?.authCodeTheme.colors.inactiveFillColor ?? MoonColors.light.gohan; - _effectiveTextStyle = context.moonTheme?.authCodeTheme.properties.textStyle ?? MoonTextStyles.body.text24; + _effectiveTextStyle = + context.moonTheme?.authCodeTheme.properties.textStyle ?? MoonTypography.typography.body.text24; - _effectiveErrorTextStyle = context.moonTheme?.authCodeTheme.properties.errorTextStyle ?? MoonTextStyles.body.text12; + _effectiveErrorTextStyle = + context.moonTheme?.authCodeTheme.properties.errorTextStyle ?? MoonTypography.typography.body.text12; - _effectiveTextColor = context.moonTheme?.authCodeTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + _effectiveTextColor = context.moonTheme?.authCodeTheme.colors.textColor ?? MoonColors.light.textPrimary; _effectiveCursorColor = widget.authFieldCursorColor ?? context.moonTheme?.authCodeTheme.colors.textColor ?? - MoonTypography.light.colors.bodyPrimary; + MoonColors.light.textPrimary; _animationDuration ??= widget.animationDuration ?? context.moonTheme?.authCodeTheme.properties.animationDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; - _animationCurve ??= - widget.animationCurve ?? context.moonTheme?.authCodeTheme.properties.animationCurve ?? Curves.easeInOutCubic; + _animationCurve ??= widget.animationCurve ?? + context.moonTheme?.authCodeTheme.properties.animationCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; _peekDuration ??= widget.peekDuration ?? context.moonTheme?.authCodeTheme.properties.peekDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; final double effectiveDisabledOpacityValue = - widget.disabledOpacityValue ?? context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; + widget.disabledOpacityValue ?? context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; final Duration effectiveErrorAnimationDuration = widget.errorAnimationDuration ?? context.moonTheme?.authCodeTheme.properties.errorAnimationDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveErrorAnimationCurve = widget.errorAnimationCurve ?? context.moonTheme?.authCodeTheme.properties.errorAnimationCurve ?? - Curves.easeInOutCubic; + MoonTransitions.transitions.defaultTransitionCurve; _errorAnimationController ??= AnimationController( duration: effectiveErrorAnimationDuration, diff --git a/lib/src/widgets/avatar/avatar.dart b/lib/src/widgets/avatar/avatar.dart index 0ed9d102..26912a4e 100644 --- a/lib/src/widgets/avatar/avatar.dart +++ b/lib/src/widgets/avatar/avatar.dart @@ -2,10 +2,10 @@ import 'package:flutter/foundation.dart'; 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/avatar/avatar_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -119,19 +119,19 @@ class MoonAvatar extends StatelessWidget { MoonAvatarSizeProperties _getMoonAvatarSize(BuildContext context, MoonAvatarSize? moonAvatarSize) { switch (moonAvatarSize) { case MoonAvatarSize.xs: - return context.moonTheme?.avatarTheme.sizes.xs ?? MoonAvatarSizeProperties.xs; + return context.moonTheme?.avatarTheme.sizes.xs ?? MoonAvatarSizes(tokens: MoonTokens.light).xs; case MoonAvatarSize.sm: - return context.moonTheme?.avatarTheme.sizes.sm ?? MoonAvatarSizeProperties.sm; + return context.moonTheme?.avatarTheme.sizes.sm ?? MoonAvatarSizes(tokens: MoonTokens.light).sm; case MoonAvatarSize.md: - return context.moonTheme?.avatarTheme.sizes.md ?? MoonAvatarSizeProperties.md; + return context.moonTheme?.avatarTheme.sizes.md ?? MoonAvatarSizes(tokens: MoonTokens.light).md; case MoonAvatarSize.lg: - return context.moonTheme?.avatarTheme.sizes.lg ?? MoonAvatarSizeProperties.lg; + return context.moonTheme?.avatarTheme.sizes.lg ?? MoonAvatarSizes(tokens: MoonTokens.light).lg; case MoonAvatarSize.xl: - return context.moonTheme?.avatarTheme.sizes.xl ?? MoonAvatarSizeProperties.xl; + return context.moonTheme?.avatarTheme.sizes.xl ?? MoonAvatarSizes(tokens: MoonTokens.light).xl; case MoonAvatarSize.x2l: - return context.moonTheme?.avatarTheme.sizes.x2l ?? MoonAvatarSizeProperties.x2l; + return context.moonTheme?.avatarTheme.sizes.x2l ?? MoonAvatarSizes(tokens: MoonTokens.light).x2l; default: - return context.moonTheme?.avatarTheme.sizes.md ?? MoonAvatarSizeProperties.md; + return context.moonTheme?.avatarTheme.sizes.md ?? MoonAvatarSizes(tokens: MoonTokens.light).md; } } @@ -149,11 +149,9 @@ class MoonAvatar extends StatelessWidget { final Color effectiveBadgeColor = badgeColor ?? context.moonTheme?.avatarTheme.colors.badgeColor ?? MoonColors.light.roshi100; - final Color effectiveTextColor = - context.moonTheme?.avatarTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + final Color effectiveTextColor = context.moonTheme?.avatarTheme.colors.textColor ?? MoonColors.light.textPrimary; - final Color effectiveIconColor = - context.moonTheme?.avatarTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; + final Color effectiveIconColor = context.moonTheme?.avatarTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final double effectiveAvatarHeight = height ?? effectiveMoonAvatarSize.avatarSizeValue; diff --git a/lib/src/widgets/bottom_sheet/bottom_sheet.dart b/lib/src/widgets/bottom_sheet/bottom_sheet.dart index 70588178..08f4d05c 100644 --- a/lib/src/widgets/bottom_sheet/bottom_sheet.dart +++ b/lib/src/widgets/bottom_sheet/bottom_sheet.dart @@ -3,12 +3,10 @@ import 'dart:async'; import 'package:flutter/gestures.dart'; 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/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -359,13 +357,13 @@ class MoonBottomSheetState extends State with TickerProviderSta widget.backgroundColor ?? context.moonTheme?.bottomSheetTheme.colors.backgroundColor ?? MoonColors.light.gohan; final Color effectiveTextColor = - context.moonTheme?.bottomSheetTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.bottomSheetTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveIconColor = - context.moonTheme?.bottomSheetTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; + context.moonTheme?.bottomSheetTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final TextStyle effectiveTextStyle = - context.moonTheme?.bottomSheetTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; + context.moonTheme?.bottomSheetTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; final bounceAnimation = CurvedAnimation( parent: _bounceDragController, diff --git a/lib/src/widgets/bottom_sheet/modal_bottom_sheet.dart b/lib/src/widgets/bottom_sheet/modal_bottom_sheet.dart index 4c64a929..73f9be4c 100644 --- a/lib/src/widgets/bottom_sheet/modal_bottom_sheet.dart +++ b/lib/src/widgets/bottom_sheet/modal_bottom_sheet.dart @@ -3,6 +3,7 @@ import 'dart:async'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; /// Shows a modal Moon Design bottom sheet. Future showMoonModalBottomSheet({ @@ -39,10 +40,11 @@ Future showMoonModalBottomSheet({ final Duration effectiveTransitionDuration = transitionDuration ?? context.moonTheme?.bottomSheetTheme.properties.transitionDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; - final Curve effectiveTransitionCurve = - transitionCurve ?? context.moonTheme?.bottomSheetTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final Curve effectiveTransitionCurve = transitionCurve ?? + context.moonTheme?.bottomSheetTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; final result = await Navigator.of(context, rootNavigator: useRootNavigator).push( MoonModalBottomSheetRoute( @@ -115,7 +117,7 @@ class MoonModalBottomSheetRoute extends PageRoute { final String? barrierLabel; @override - Duration get transitionDuration => animationDuration ?? const Duration(milliseconds: 200); + Duration get transitionDuration => animationDuration ?? MoonTransitions.transitions.defaultTransitionDuration; @override bool get barrierDismissible => isDismissible; diff --git a/lib/src/widgets/buttons/button.dart b/lib/src/widgets/buttons/button.dart index fef0ae53..d6533522 100644 --- a/lib/src/widgets/buttons/button.dart +++ b/lib/src/widgets/buttons/button.dart @@ -1,11 +1,12 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; import 'package:moon_design/src/theme/button/button_size_properties.dart'; -import 'package:moon_design/src/theme/colors.dart'; -import 'package:moon_design/src/theme/effects/hover_effects.dart'; +import 'package:moon_design/src/theme/button/button_sizes.dart'; +import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -293,17 +294,17 @@ class _MoonButtonState extends State with SingleTickerProviderStateM MoonButtonSizeProperties _getMoonButtonSize(BuildContext context, MoonButtonSize? moonButtonSize) { switch (moonButtonSize) { case MoonButtonSize.xs: - return context.moonTheme?.buttonTheme.sizes.xs ?? MoonButtonSizeProperties.xs; + return context.moonTheme?.buttonTheme.sizes.xs ?? MoonButtonSizes(tokens: MoonTokens.light).xs; case MoonButtonSize.sm: - return context.moonTheme?.buttonTheme.sizes.sm ?? MoonButtonSizeProperties.sm; + return context.moonTheme?.buttonTheme.sizes.sm ?? MoonButtonSizes(tokens: MoonTokens.light).sm; case MoonButtonSize.md: - return context.moonTheme?.buttonTheme.sizes.md ?? MoonButtonSizeProperties.md; + return context.moonTheme?.buttonTheme.sizes.md ?? MoonButtonSizes(tokens: MoonTokens.light).md; case MoonButtonSize.lg: - return context.moonTheme?.buttonTheme.sizes.lg ?? MoonButtonSizeProperties.lg; + return context.moonTheme?.buttonTheme.sizes.lg ?? MoonButtonSizes(tokens: MoonTokens.light).lg; case MoonButtonSize.xl: - return context.moonTheme?.buttonTheme.sizes.xl ?? MoonButtonSizeProperties.xl; + return context.moonTheme?.buttonTheme.sizes.xl ?? MoonButtonSizes(tokens: MoonTokens.light).xl; default: - return context.moonTheme?.buttonTheme.sizes.md ?? MoonButtonSizeProperties.md; + return context.moonTheme?.buttonTheme.sizes.md ?? MoonButtonSizes(tokens: MoonTokens.light).md; } } @@ -326,11 +327,11 @@ class _MoonButtonState extends State with SingleTickerProviderStateM widget.borderWidth ?? context.moonBorders?.defaultBorderWidth ?? MoonBorders.borders.defaultBorderWidth; final Color effectiveTextColor = - widget.textColor ?? context.moonTheme?.buttonTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + widget.textColor ?? context.moonTheme?.buttonTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveHoverEffectColor = widget.hoverEffectColor ?? context.moonEffects?.controlHoverEffect.primaryHoverColor ?? - MoonHoverEffects.lightHoverEffect.primaryHoverColor; + MoonEffectsTheme(tokens: MoonTokens.light).controlHoverEffect.primaryHoverColor; final Color hoverColor = Color.alphaBlend(effectiveHoverEffectColor, widget.backgroundColor ?? Colors.transparent); @@ -353,11 +354,11 @@ class _MoonButtonState extends State with SingleTickerProviderStateM final Duration effectiveHoverEffectDuration = widget.hoverEffectDuration ?? context.moonEffects?.controlHoverEffect.hoverDuration ?? - MoonHoverEffects.lightHoverEffect.hoverDuration; + MoonEffectsTheme(tokens: MoonTokens.light).controlHoverEffect.hoverDuration; final Curve effectiveHoverEffectCurve = widget.hoverEffectCurve ?? context.moonEffects?.controlHoverEffect.hoverCurve ?? - MoonHoverEffects.lightHoverEffect.hoverCurve; + MoonEffectsTheme(tokens: MoonTokens.light).controlHoverEffect.hoverCurve; _animationController ??= AnimationController(duration: effectiveHoverEffectDuration, vsync: this); diff --git a/lib/src/widgets/buttons/filled_button.dart b/lib/src/widgets/buttons/filled_button.dart index 1d7abebb..72908931 100644 --- a/lib/src/widgets/buttons/filled_button.dart +++ b/lib/src/widgets/buttons/filled_button.dart @@ -1,8 +1,7 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; class MoonFilledButton extends StatelessWidget { @@ -106,8 +105,7 @@ class MoonFilledButton extends StatelessWidget { context.moonTheme?.buttonTheme.colors.filledVariantBackgroundColor ?? MoonColors.light.piccolo; - final effectiveTextColor = - context.moonTheme?.buttonTheme.colors.filledVariantTextColor ?? MoonTypography.light.colors.controlPrimary; + final effectiveTextColor = context.moonTheme?.buttonTheme.colors.filledVariantTextColor ?? MoonColors.light.goten; return MoonButton( autofocus: autofocus, diff --git a/lib/src/widgets/buttons/text_button.dart b/lib/src/widgets/buttons/text_button.dart index 162512a5..9d5f8921 100644 --- a/lib/src/widgets/buttons/text_button.dart +++ b/lib/src/widgets/buttons/text_button.dart @@ -1,8 +1,7 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; @@ -96,10 +95,9 @@ class MoonTextButton extends StatelessWidget { @override Widget build(BuildContext context) { final effectiveTextColor = - context.moonTheme?.buttonTheme.colors.textVariantTextColor ?? MoonTypography.light.colors.bodySecondary; + context.moonTheme?.buttonTheme.colors.textVariantTextColor ?? MoonColors.light.textSecondary; - final effectiveHoverTextColor = - context.moonTheme?.buttonTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + final effectiveHoverTextColor = context.moonTheme?.buttonTheme.colors.textColor ?? MoonColors.light.textPrimary; final effectiveHoverColor = context.moonTheme?.buttonTheme.colors.textVariantHoverColor ?? MoonColors.light.jiren; diff --git a/lib/src/widgets/carousel/carousel.dart b/lib/src/widgets/carousel/carousel.dart index 4d4aa37e..c7866ca8 100644 --- a/lib/src/widgets/carousel/carousel.dart +++ b/lib/src/widgets/carousel/carousel.dart @@ -7,11 +7,11 @@ import 'package:flutter/material.dart'; import 'package:flutter/physics.dart'; import 'package:flutter/rendering.dart'; -import 'package:moon_design/src/theme/icons/icon_theme.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/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/sizes.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; class MoonCarousel extends StatefulWidget { /// Axis direction of the carousel. Defaults to `Axis.horizontal`. @@ -248,14 +248,12 @@ class _MoonCarouselState extends State { @override Widget build(BuildContext context) { - final Color effectiveTextColor = - context.moonTheme?.carouselTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + final Color effectiveTextColor = context.moonTheme?.carouselTheme.colors.textColor ?? MoonColors.light.textPrimary; - final Color effectiveIconColor = - context.moonTheme?.carouselTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; + final Color effectiveIconColor = context.moonTheme?.carouselTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final TextStyle effectiveTextStyle = - context.moonTheme?.carouselTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; + context.moonTheme?.carouselTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; final AxisDirection axisDirection = _getDirection(context); @@ -449,11 +447,13 @@ class MoonCarouselScrollController extends ScrollController { Future previousItem({required BuildContext context, Duration? duration, Curve? curve}) async { if (!hasClients) return; - final Duration effectiveTransitionDuration = - duration ?? context.moonTheme?.carouselTheme.properties.transitionDuration ?? const Duration(milliseconds: 200); + final Duration effectiveTransitionDuration = duration ?? + context.moonTheme?.carouselTheme.properties.transitionDuration ?? + MoonTransitions.transitions.defaultTransitionDuration; - final Curve effectiveTransitionCurve = - curve ?? context.moonTheme?.carouselTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final Curve effectiveTransitionCurve = curve ?? + context.moonTheme?.carouselTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; await Future.wait([ for (final position in positions.cast<_MoonCarouselScrollPosition>()) diff --git a/lib/src/widgets/checkbox/checkbox.dart b/lib/src/widgets/checkbox/checkbox.dart index 31916d62..e868ab63 100644 --- a/lib/src/widgets/checkbox/checkbox.dart +++ b/lib/src/widgets/checkbox/checkbox.dart @@ -1,12 +1,12 @@ 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/effects/focus_effects.dart'; -import 'package:moon_design/src/theme/opacity.dart'; +import 'package:moon_design/src/theme/effects/effects_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/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/opacities.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/utils/touch_target_padding.dart'; @@ -95,18 +95,17 @@ class MoonCheckbox extends StatefulWidget { }) { final bool isInteractive = onChanged != null; - final Color effectiveTextColor = - context.moonTheme?.checkboxTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + final Color effectiveTextColor = context.moonTheme?.checkboxTheme.colors.textColor ?? MoonColors.light.textPrimary; final TextStyle effectiveTextStyle = - context.moonTheme?.checkboxTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; + context.moonTheme?.checkboxTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; final TextStyle resolvedTextStyle = effectiveTextStyle.copyWith(color: effectiveTextColor).merge(textStyle); - final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; + final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; - final Duration effectiveFocusEffectDuration = - context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; + final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectDuration; return GestureDetector( onTap: () => onChanged?.call(!value!), @@ -219,19 +218,19 @@ class _MoonCheckboxState extends State with TickerProviderStateMix final Color effectiveBorderColor = widget.borderColor ?? context.moonTheme?.checkboxTheme.colors.borderColor ?? MoonColors.light.trunks; - final Color effectiveFocusEffectColor = - context.moonEffects?.controlFocusEffect.effectColor ?? MoonFocusEffects.lightFocusEffect.effectColor; + final Color effectiveFocusEffectColor = context.moonEffects?.controlFocusEffect.effectColor ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectColor; - final Duration effectiveFocusEffectDuration = - context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; + final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectDuration; - final Curve effectiveFocusEffectCurve = - context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; + final Curve effectiveFocusEffectCurve = context.moonEffects?.controlFocusEffect.effectCurve ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectCurve; - final double effectiveFocusEffectExtent = - context.moonEffects?.controlFocusEffect.effectExtent ?? MoonFocusEffects.lightFocusEffect.effectExtent; + final double effectiveFocusEffectExtent = context.moonEffects?.controlFocusEffect.effectExtent ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectExtent; - final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; + final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; final MaterialStateProperty effectiveMouseCursor = MaterialStateProperty.resolveWith((Set states) { diff --git a/lib/src/widgets/chips/chip.dart b/lib/src/widgets/chips/chip.dart index 1564ee95..30037f3a 100644 --- a/lib/src/widgets/chips/chip.dart +++ b/lib/src/widgets/chips/chip.dart @@ -1,11 +1,12 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/borders.dart'; import 'package:moon_design/src/theme/chip/chip_size_properties.dart'; -import 'package:moon_design/src/theme/colors.dart'; -import 'package:moon_design/src/theme/effects/hover_effects.dart'; +import 'package:moon_design/src/theme/chip/chip_sizes.dart'; +import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -232,12 +233,12 @@ class _MoonChipState extends State with SingleTickerProviderStateMixin MoonChipSizeProperties _getMoonChipSize(BuildContext context, MoonChipSize? moonChipSize) { switch (moonChipSize) { case MoonChipSize.sm: - return context.moonTheme?.chipTheme.sizes.sm ?? MoonChipSizeProperties.sm; + return context.moonTheme?.chipTheme.sizes.sm ?? MoonChipSizes(tokens: MoonTokens.light).sm; case MoonChipSize.md: - return context.moonTheme?.chipTheme.sizes.md ?? MoonChipSizeProperties.md; + return context.moonTheme?.chipTheme.sizes.md ?? MoonChipSizes(tokens: MoonTokens.light).md; default: - return context.moonTheme?.chipTheme.sizes.md ?? MoonChipSizeProperties.sm; + return context.moonTheme?.chipTheme.sizes.md ?? MoonChipSizes(tokens: MoonTokens.light).sm; } } @@ -271,15 +272,15 @@ class _MoonChipState extends State with SingleTickerProviderStateMixin MoonColors.light.jiren; final Color effectiveTextColor = - widget.textColor ?? context.moonTheme?.chipTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; - - final Curve effectiveActiveEffectCurve = widget.activeEffectCurve ?? - context.moonEffects?.controlHoverEffect.hoverCurve ?? - MoonHoverEffects.lightHoverEffect.hoverCurve; + widget.textColor ?? context.moonTheme?.chipTheme.colors.textColor ?? MoonColors.light.textPrimary; final Duration effectiveActiveEffectDuration = widget.activeEffectDuration ?? context.moonEffects?.controlHoverEffect.hoverDuration ?? - MoonHoverEffects.lightHoverEffect.hoverDuration; + MoonEffectsTheme(tokens: MoonTokens.light).controlHoverEffect.hoverDuration; + + final Curve effectiveActiveEffectCurve = widget.activeEffectCurve ?? + context.moonEffects?.controlHoverEffect.hoverCurve ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlHoverEffect.hoverCurve; final EdgeInsetsGeometry effectivePadding = widget.padding ?? effectiveMoonChipSize.padding; diff --git a/lib/src/widgets/common/base_control.dart b/lib/src/widgets/common/base_control.dart index 0e17a024..c765c150 100644 --- a/lib/src/widgets/common/base_control.dart +++ b/lib/src/widgets/common/base_control.dart @@ -1,9 +1,10 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/effects/controls_effects.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/effects/effects_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; +import 'package:moon_design/src/theme/tokens/opacities.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/touch_target_padding.dart'; import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; @@ -311,56 +312,56 @@ class _MoonBaseControlState extends State { @override Widget build(BuildContext context) { final double effectiveDisabledOpacityValue = - widget.disabledOpacityValue ?? context.moonOpacity?.disabled ?? MoonOpacity.opacities.disabled; + widget.disabledOpacityValue ?? context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; // Focus effect props final Color effectiveFocusEffectColor = widget.focusEffectColor ?? context.moonEffects?.controlFocusEffect.effectColor ?? - MoonFocusEffects.lightFocusEffect.effectColor; + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectColor; final Color focusColor = _getFocusColor(focusColor: effectiveFocusEffectColor); final double effectiveFocusEffectExtent = widget.focusEffectExtent ?? context.moonEffects?.controlFocusEffect.effectExtent ?? - MoonFocusEffects.lightFocusEffect.effectExtent; + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectExtent; final Duration effectiveFocusEffectDuration = widget.focusEffectDuration ?? context.moonEffects?.controlFocusEffect.effectDuration ?? - MoonFocusEffects.lightFocusEffect.effectDuration; + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectDuration; final Curve effectiveFocusEffectCurve = widget.focusEffectCurve ?? context.moonEffects?.controlFocusEffect.effectCurve ?? - MoonFocusEffects.lightFocusEffect.effectCurve; + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectCurve; // Pulse effect props final Color effectivePulseEffectColor = widget.pulseEffectColor ?? context.moonEffects?.controlPulseEffect.effectColor ?? - MoonControlsEffects.controlPulseEffect.effectColor!; + MoonEffectsTheme(tokens: MoonTokens.light).controlPulseEffect.effectColor!; final double effectivePulseEffectExtent = widget.pulseEffectExtent ?? context.moonEffects?.controlPulseEffect.effectExtent ?? - MoonControlsEffects.controlPulseEffect.effectExtent!; + MoonEffectsTheme(tokens: MoonTokens.light).controlPulseEffect.effectExtent!; final Duration effectivePulseEffectDuration = widget.pulseEffectDuration ?? context.moonEffects?.controlPulseEffect.effectDuration ?? - MoonControlsEffects.controlPulseEffect.effectDuration; + MoonEffectsTheme(tokens: MoonTokens.light).controlPulseEffect.effectDuration; final Curve effectivePulseEffectCurve = widget.pulseEffectCurve ?? context.moonEffects?.controlPulseEffect.effectCurve ?? - MoonControlsEffects.controlPulseEffect.effectCurve; + MoonEffectsTheme(tokens: MoonTokens.light).controlPulseEffect.effectCurve; // Scale effect props final double effectiveScaleEffectScalar = widget.scaleEffectScalar ?? context.moonEffects?.controlScaleEffect.effectScalar ?? - MoonControlsEffects.controlScaleEffect.effectScalar!; + MoonEffectsTheme(tokens: MoonTokens.light).controlScaleEffect.effectScalar!; final Duration effectiveScaleEffectDuration = widget.scaleEffectDuration ?? context.moonEffects?.controlScaleEffect.effectDuration ?? - MoonControlsEffects.controlScaleEffect.effectDuration; + MoonEffectsTheme(tokens: MoonTokens.light).controlScaleEffect.effectDuration; final Curve effectiveScaleEffectCurve = widget.scaleEffectCurve ?? context.moonEffects?.controlScaleEffect.effectCurve ?? - MoonControlsEffects.controlScaleEffect.effectCurve; + MoonEffectsTheme(tokens: MoonTokens.light).controlScaleEffect.effectCurve; final Widget child = widget.builder( context, @@ -422,8 +423,10 @@ class _MoonBaseControlState extends State { effectDuration: effectivePulseEffectDuration, child: AnimatedOpacity( opacity: _isEnabled ? 1 : effectiveDisabledOpacityValue, - duration: const Duration(milliseconds: 150), - curve: Curves.easeInOutCubic, + duration: context.moonTransitions?.defaultTransitionDuration ?? + MoonTransitions.transitions.defaultTransitionDuration, + curve: context.moonTransitions?.defaultTransitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve, child: MoonFocusEffect( show: _canAnimateFocus, effectColor: focusColor, diff --git a/lib/src/widgets/dot_indicator/dot_indicator.dart b/lib/src/widgets/dot_indicator/dot_indicator.dart index 75d11c18..b1a4363a 100644 --- a/lib/src/widgets/dot_indicator/dot_indicator.dart +++ b/lib/src/widgets/dot_indicator/dot_indicator.dart @@ -1,8 +1,9 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; -import 'package:moon_design/src/theme/sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/sizes.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; class MoonDotIndicator extends StatefulWidget { @@ -97,11 +98,11 @@ class _CarouselIndicatorState extends State with TickerProvide final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.dotIndicatorTheme.properties.transitionDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.dotIndicatorTheme.properties.transitionCurve ?? - Curves.easeInOutCubic; + MoonTransitions.transitions.defaultTransitionCurve; _animationControllers ??= List.generate( widget.dotCount, diff --git a/lib/src/widgets/drawer/drawer.dart b/lib/src/widgets/drawer/drawer.dart index f0689366..71727781 100644 --- a/lib/src/widgets/drawer/drawer.dart +++ b/lib/src/widgets/drawer/drawer.dart @@ -1,11 +1,9 @@ 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/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/shadows.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -55,11 +53,9 @@ class MoonDrawer extends StatelessWidget { final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.drawerTheme.colors.backgroundColor ?? MoonColors.light.gohan; - final Color effectiveTextColor = - context.moonTheme?.drawerTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + final Color effectiveTextColor = context.moonTheme?.drawerTheme.colors.textColor ?? MoonColors.light.textPrimary; - final Color effectiveIconColor = - context.moonTheme?.drawerTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; + final Color effectiveIconColor = context.moonTheme?.drawerTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final double effectiveWidthFromTheme = context.moonTheme?.drawerTheme.properties.width ?? 448; @@ -72,7 +68,7 @@ class MoonDrawer extends StatelessWidget { drawerShadows ?? context.moonTheme?.drawerTheme.shadows.drawerShadows ?? MoonShadows.light.lg; final TextStyle effectiveTextStyle = - context.moonTheme?.drawerTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; + context.moonTheme?.drawerTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; return Semantics( explicitChildNodes: true, diff --git a/lib/src/widgets/loaders/circular_loader.dart b/lib/src/widgets/loaders/circular_loader.dart index 962d5dcf..480d2679 100644 --- a/lib/src/widgets/loaders/circular_loader.dart +++ b/lib/src/widgets/loaders/circular_loader.dart @@ -1,8 +1,10 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_size_properties.dart'; +import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/circular_progress_indicator.dart'; enum MoonCircularLoaderSize { @@ -46,18 +48,19 @@ class MoonCircularLoader extends StatelessWidget { MoonCircularLoaderSizeProperties _getMoonLoaderSize(BuildContext context, MoonCircularLoaderSize? moonLoaderSize) { switch (moonLoaderSize) { case MoonCircularLoaderSize.x2s: - return context.moonTheme?.circularLoaderTheme.sizes.x2s ?? MoonCircularLoaderSizeProperties.x2s; + return context.moonTheme?.circularLoaderTheme.sizes.x2s ?? + MoonCircularLoaderSizes(tokens: MoonTokens.light).x2s; case MoonCircularLoaderSize.xs: - return context.moonTheme?.circularLoaderTheme.sizes.xs ?? MoonCircularLoaderSizeProperties.xs; + return context.moonTheme?.circularLoaderTheme.sizes.xs ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).xs; case MoonCircularLoaderSize.sm: - return context.moonTheme?.circularLoaderTheme.sizes.sm ?? MoonCircularLoaderSizeProperties.sm; + return context.moonTheme?.circularLoaderTheme.sizes.sm ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).sm; case MoonCircularLoaderSize.md: - return context.moonTheme?.circularLoaderTheme.sizes.md ?? MoonCircularLoaderSizeProperties.md; + return context.moonTheme?.circularLoaderTheme.sizes.md ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).md; case MoonCircularLoaderSize.lg: - return context.moonTheme?.circularLoaderTheme.sizes.lg ?? MoonCircularLoaderSizeProperties.lg; + return context.moonTheme?.circularLoaderTheme.sizes.lg ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).lg; default: - return context.moonTheme?.circularLoaderTheme.sizes.md ?? MoonCircularLoaderSizeProperties.md; + return context.moonTheme?.circularLoaderTheme.sizes.md ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).md; } } diff --git a/lib/src/widgets/loaders/linear_loader.dart b/lib/src/widgets/loaders/linear_loader.dart index 43f7c089..1ed32e97 100644 --- a/lib/src/widgets/loaders/linear_loader.dart +++ b/lib/src/widgets/loaders/linear_loader.dart @@ -1,8 +1,10 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_size_properties.dart'; +import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/linear_progress_indicator.dart'; enum MoonLinearLoaderSize { @@ -42,18 +44,18 @@ class MoonLinearLoader extends StatelessWidget { MoonLinearLoaderSizeProperties _getMoonLoaderSize(BuildContext context, MoonLinearLoaderSize? moonLoaderSize) { switch (moonLoaderSize) { case MoonLinearLoaderSize.x6s: - return context.moonTheme?.linearLoaderTheme.sizes.x6s ?? MoonLinearLoaderSizeProperties.x6s; + return context.moonTheme?.linearLoaderTheme.sizes.x6s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x6s; case MoonLinearLoaderSize.x5s: - return context.moonTheme?.linearLoaderTheme.sizes.x5s ?? MoonLinearLoaderSizeProperties.x5s; + return context.moonTheme?.linearLoaderTheme.sizes.x5s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x5s; case MoonLinearLoaderSize.x4s: - return context.moonTheme?.linearLoaderTheme.sizes.x4s ?? MoonLinearLoaderSizeProperties.x4s; + return context.moonTheme?.linearLoaderTheme.sizes.x4s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x4s; case MoonLinearLoaderSize.x3s: - return context.moonTheme?.linearLoaderTheme.sizes.x3s ?? MoonLinearLoaderSizeProperties.x3s; + return context.moonTheme?.linearLoaderTheme.sizes.x3s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x3s; case MoonLinearLoaderSize.x2s: - return context.moonTheme?.linearLoaderTheme.sizes.x2s ?? MoonLinearLoaderSizeProperties.x2s; + return context.moonTheme?.linearLoaderTheme.sizes.x2s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x2s; default: - return context.moonTheme?.linearLoaderTheme.sizes.x4s ?? MoonLinearLoaderSizeProperties.x4s; + return context.moonTheme?.linearLoaderTheme.sizes.x4s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x4s; } } diff --git a/lib/src/widgets/modal/modal.dart b/lib/src/widgets/modal/modal.dart index bd89174c..6a32bfdc 100644 --- a/lib/src/widgets/modal/modal.dart +++ b/lib/src/widgets/modal/modal.dart @@ -1,11 +1,10 @@ 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/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -38,10 +37,11 @@ Future showMoonModal({ final Duration effectiveTransitionDuration = transitionDuration ?? context.moonTheme?.modalTheme.properties.transitionDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; - final Curve effectiveTransitionCurve = - transitionCurve ?? context.moonTheme?.modalTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final Curve effectiveTransitionCurve = transitionCurve ?? + context.moonTheme?.modalTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; return Navigator.of(context, rootNavigator: useRootNavigator).push( MoonModalRoute( @@ -152,14 +152,12 @@ class MoonModal extends StatelessWidget { final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.modalTheme.colors.backgroundColor ?? MoonColors.light.gohan; - final Color effectiveTextColor = - context.moonTheme?.modalTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + final Color effectiveTextColor = context.moonTheme?.modalTheme.colors.textColor ?? MoonColors.light.textPrimary; - final Color effectiveIconColor = - context.moonTheme?.modalTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; + final Color effectiveIconColor = context.moonTheme?.modalTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final TextStyle effectiveTextStyle = - context.moonTheme?.modalTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; + context.moonTheme?.modalTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; return Semantics( label: semanticLabel, diff --git a/lib/src/widgets/popover/popover.dart b/lib/src/widgets/popover/popover.dart index d83e8ff0..633fcfa9 100644 --- a/lib/src/widgets/popover/popover.dart +++ b/lib/src/widgets/popover/popover.dart @@ -1,11 +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/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/shadows.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -353,14 +352,12 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.popoverTheme.colors.backgroundColor ?? MoonColors.light.gohan; - final Color effectiveTextColor = - context.moonTheme?.popoverTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + final Color effectiveTextColor = context.moonTheme?.popoverTheme.colors.textColor ?? MoonColors.light.textPrimary; - final Color effectiveIconColor = - context.moonTheme?.popoverTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; + final Color effectiveIconColor = context.moonTheme?.popoverTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final TextStyle effectiveTextStyle = - context.moonTheme?.popoverTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; + context.moonTheme?.popoverTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; final double effectiveDistanceToTarget = widget.distanceToTarget ?? context.moonTheme?.popoverTheme.properties.distanceToTarget ?? 8; @@ -472,10 +469,11 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP Widget build(BuildContext context) { final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.popoverTheme.properties.transitionDuration ?? - const Duration(milliseconds: 150); + MoonTransitions.transitions.defaultTransitionDuration; - final Curve effectiveTransitionCurve = - widget.transitionCurve ?? context.moonTheme?.popoverTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final Curve effectiveTransitionCurve = widget.transitionCurve ?? + context.moonTheme?.popoverTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; _animationController ??= AnimationController( duration: effectiveTransitionDuration, diff --git a/lib/src/widgets/progress/circular_progress.dart b/lib/src/widgets/progress/circular_progress.dart index f1980335..c30270de 100644 --- a/lib/src/widgets/progress/circular_progress.dart +++ b/lib/src/widgets/progress/circular_progress.dart @@ -1,8 +1,10 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_size_properties.dart'; +import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/circular_progress_indicator.dart'; enum MoonCircularProgressSize { @@ -57,18 +59,24 @@ class MoonCircularProgress extends StatelessWidget { ) { switch (moonCircularProgressSize) { case MoonCircularProgressSize.x2s: - return context.moonTheme?.circularProgressTheme.sizes.x2s ?? MoonCircularProgressSizeProperties.x2s; + return context.moonTheme?.circularProgressTheme.sizes.x2s ?? + MoonCircularProgressSizes(tokens: MoonTokens.light).x2s; case MoonCircularProgressSize.xs: - return context.moonTheme?.circularProgressTheme.sizes.xs ?? MoonCircularProgressSizeProperties.xs; + return context.moonTheme?.circularProgressTheme.sizes.xs ?? + MoonCircularProgressSizes(tokens: MoonTokens.light).xs; case MoonCircularProgressSize.sm: - return context.moonTheme?.circularProgressTheme.sizes.sm ?? MoonCircularProgressSizeProperties.sm; + return context.moonTheme?.circularProgressTheme.sizes.sm ?? + MoonCircularProgressSizes(tokens: MoonTokens.light).sm; case MoonCircularProgressSize.md: - return context.moonTheme?.circularProgressTheme.sizes.md ?? MoonCircularProgressSizeProperties.md; + return context.moonTheme?.circularProgressTheme.sizes.md ?? + MoonCircularProgressSizes(tokens: MoonTokens.light).md; case MoonCircularProgressSize.lg: - return context.moonTheme?.circularProgressTheme.sizes.lg ?? MoonCircularProgressSizeProperties.lg; + return context.moonTheme?.circularProgressTheme.sizes.lg ?? + MoonCircularProgressSizes(tokens: MoonTokens.light).lg; default: - return context.moonTheme?.circularProgressTheme.sizes.md ?? MoonCircularProgressSizeProperties.md; + return context.moonTheme?.circularProgressTheme.sizes.md ?? + MoonCircularProgressSizes(tokens: MoonTokens.light).md; } } diff --git a/lib/src/widgets/progress/linear_progress.dart b/lib/src/widgets/progress/linear_progress.dart index 39da16e8..4dcf14e3 100644 --- a/lib/src/widgets/progress/linear_progress.dart +++ b/lib/src/widgets/progress/linear_progress.dart @@ -1,8 +1,10 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_size_properties.dart'; +import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/linear_progress_indicator.dart'; enum MoonLinearProgressSize { @@ -53,18 +55,24 @@ class MoonLinearProgress extends StatelessWidget { ) { switch (moonProgressSize) { case MoonLinearProgressSize.x6s: - return context.moonTheme?.linearProgressTheme.sizes.x6s ?? MoonLinearProgressSizeProperties.x6s; + return context.moonTheme?.linearProgressTheme.sizes.x6s ?? + MoonLinearProgressSizes(tokens: MoonTokens.light).x6s; case MoonLinearProgressSize.x5s: - return context.moonTheme?.linearProgressTheme.sizes.x5s ?? MoonLinearProgressSizeProperties.x5s; + return context.moonTheme?.linearProgressTheme.sizes.x5s ?? + MoonLinearProgressSizes(tokens: MoonTokens.light).x5s; case MoonLinearProgressSize.x4s: - return context.moonTheme?.linearProgressTheme.sizes.x4s ?? MoonLinearProgressSizeProperties.x4s; + return context.moonTheme?.linearProgressTheme.sizes.x4s ?? + MoonLinearProgressSizes(tokens: MoonTokens.light).x4s; case MoonLinearProgressSize.x3s: - return context.moonTheme?.linearProgressTheme.sizes.x3s ?? MoonLinearProgressSizeProperties.x3s; + return context.moonTheme?.linearProgressTheme.sizes.x3s ?? + MoonLinearProgressSizes(tokens: MoonTokens.light).x3s; case MoonLinearProgressSize.x2s: - return context.moonTheme?.linearProgressTheme.sizes.x2s ?? MoonLinearProgressSizeProperties.x2s; + return context.moonTheme?.linearProgressTheme.sizes.x2s ?? + MoonLinearProgressSizes(tokens: MoonTokens.light).x2s; default: - return context.moonTheme?.linearProgressTheme.sizes.x4s ?? MoonLinearProgressSizeProperties.x4s; + return context.moonTheme?.linearProgressTheme.sizes.x4s ?? + MoonLinearProgressSizes(tokens: MoonTokens.light).x4s; } } diff --git a/lib/src/widgets/radio/radio.dart b/lib/src/widgets/radio/radio.dart index 1163e1b9..adb7b021 100644 --- a/lib/src/widgets/radio/radio.dart +++ b/lib/src/widgets/radio/radio.dart @@ -1,11 +1,11 @@ import 'package:flutter/material.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/opacity.dart'; +import 'package:moon_design/src/theme/effects/effects_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/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/opacities.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/touch_target_padding.dart'; import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; import 'package:moon_design/src/widgets/radio/radio_painter.dart'; @@ -106,18 +106,17 @@ class MoonRadio extends StatefulWidget { }) { final bool isInteractive = onChanged != null; - final Color effectiveTextColor = - context.moonTheme?.radioTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + final Color effectiveTextColor = context.moonTheme?.radioTheme.colors.textColor ?? MoonColors.light.textPrimary; final TextStyle effectiveTextStyle = - context.moonTheme?.radioTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; + context.moonTheme?.radioTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; final TextStyle resolvedTextStyle = effectiveTextStyle.copyWith(color: effectiveTextColor).merge(textStyle); - final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; + final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; - final Duration effectiveFocusEffectDuration = - context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; + final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectDuration; return GestureDetector( onTap: () => onChanged?.call(value), @@ -208,19 +207,19 @@ class _RadioState extends State> with TickerProviderStateMixin, final Color effectiveInactiveColor = widget.inactiveColor ?? context.moonTheme?.radioTheme.colors.inactiveColor ?? MoonColors.light.trunks; - final Color effectiveFocusEffectColor = - context.moonEffects?.controlFocusEffect.effectColor ?? MoonFocusEffects.lightFocusEffect.effectColor; + final Color effectiveFocusEffectColor = context.moonEffects?.controlFocusEffect.effectColor ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectColor; - final double effectiveFocusEffectExtent = - context.moonEffects?.controlFocusEffect.effectExtent ?? MoonFocusEffects.lightFocusEffect.effectExtent; + final double effectiveFocusEffectExtent = context.moonEffects?.controlFocusEffect.effectExtent ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectExtent; - final Duration effectiveFocusEffectDuration = - context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; + final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectDuration; - final Curve effectiveFocusEffectCurve = - context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; + final Curve effectiveFocusEffectCurve = context.moonEffects?.controlFocusEffect.effectCurve ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectCurve; - final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; + final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; final MaterialStateProperty effectiveMouseCursor = MaterialStateProperty.resolveWith((Set states) { diff --git a/lib/src/widgets/segmented_control/segmented_control.dart b/lib/src/widgets/segmented_control/segmented_control.dart index c51a97a8..e26484e1 100644 --- a/lib/src/widgets/segmented_control/segmented_control.dart +++ b/lib/src/widgets/segmented_control/segmented_control.dart @@ -1,12 +1,14 @@ 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/opacity.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_size_properties.dart'; -import 'package:moon_design/src/theme/sizes.dart'; +import 'package:moon_design/src/theme/segmented_control/segmented_control_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/opacities.dart'; +import 'package:moon_design/src/theme/tokens/sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; @@ -135,11 +137,14 @@ class _MoonSegmentedControlState extends State { ) { switch (segmentedControlSize) { case MoonSegmentedControlSize.sm: - return context.moonTheme?.segmentedControlTheme.sizes.sm ?? MoonSegmentedControlSizeProperties.sm; + return context.moonTheme?.segmentedControlTheme.sizes.sm ?? + MoonSegmentedControlSizes(tokens: MoonTokens.light).sm; case MoonSegmentedControlSize.md: - return context.moonTheme?.segmentedControlTheme.sizes.md ?? MoonSegmentedControlSizeProperties.md; + return context.moonTheme?.segmentedControlTheme.sizes.md ?? + MoonSegmentedControlSizes(tokens: MoonTokens.light).md; default: - return context.moonTheme?.segmentedControlTheme.sizes.md ?? MoonSegmentedControlSizeProperties.md; + return context.moonTheme?.segmentedControlTheme.sizes.md ?? + MoonSegmentedControlSizes(tokens: MoonTokens.light).md; } } @@ -175,7 +180,7 @@ class _MoonSegmentedControlState extends State { context.moonTheme?.segmentedControlTheme.colors.backgroundColor ?? MoonColors.light.goku; - final double effectiveDisabledOpacityValue = context.moonOpacity?.disabled ?? MoonOpacity.opacities.disabled; + final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; final double effectiveHeight = widget.height ?? effectiveMoonSegmentControlSize.height; @@ -184,11 +189,11 @@ class _MoonSegmentedControlState extends State { final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.segmentedControlTheme.properties.transitionDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.segmentedControlTheme.properties.transitionCurve ?? - Curves.easeInOutCubic; + MoonTransitions.transitions.defaultTransitionCurve; final EdgeInsetsGeometry effectivePadding = widget.padding ?? context.moonTheme?.segmentedControlTheme.properties.padding ?? const EdgeInsets.all(4); @@ -319,7 +324,7 @@ class _SegmentBuilderState extends State<_SegmentBuilder> with SingleTickerProvi final Color effectiveTextColor = segmentStyle?.textStyle?.color ?? segmentStyle?.textColor ?? context.moonTheme?.segmentedControlTheme.colors.textColor ?? - MoonTypography.light.colors.bodyPrimary; + MoonColors.light.textPrimary; final Color effectiveSelectedTextColor = segmentStyle?.selectedTextColor ?? context.moonTheme?.segmentedControlTheme.colors.selectedTextColor ?? diff --git a/lib/src/widgets/switch/switch.dart b/lib/src/widgets/switch/switch.dart index 5904655f..ae8bc1d7 100644 --- a/lib/src/widgets/switch/switch.dart +++ b/lib/src/widgets/switch/switch.dart @@ -1,14 +1,15 @@ import 'package:flutter/material.dart'; 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/effects/effects_theme.dart'; import 'package:moon_design/src/theme/switch/switch_size_properties.dart'; +import 'package:moon_design/src/theme/switch/switch_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/opacities.dart'; +import 'package:moon_design/src/theme/tokens/shadows.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -141,13 +142,13 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM MoonSwitchSizeProperties _getMoonSwitchSize(BuildContext context, MoonSwitchSize? moonSwitchSize) { switch (moonSwitchSize) { case MoonSwitchSize.x2s: - return context.moonTheme?.switchTheme.sizes.x2s ?? MoonSwitchSizeProperties.x2s; + return context.moonTheme?.switchTheme.sizes.x2s ?? MoonSwitchSizes(tokens: MoonTokens.light).x2s; case MoonSwitchSize.xs: - return context.moonTheme?.switchTheme.sizes.xs ?? MoonSwitchSizeProperties.xs; + return context.moonTheme?.switchTheme.sizes.xs ?? MoonSwitchSizes(tokens: MoonTokens.light).xs; case MoonSwitchSize.sm: - return context.moonTheme?.switchTheme.sizes.sm ?? MoonSwitchSizeProperties.sm; + return context.moonTheme?.switchTheme.sizes.sm ?? MoonSwitchSizes(tokens: MoonTokens.light).sm; default: - return context.moonTheme?.switchTheme.sizes.xs ?? MoonSwitchSizeProperties.xs; + return context.moonTheme?.switchTheme.sizes.xs ?? MoonSwitchSizes(tokens: MoonTokens.light).xs; } } @@ -291,7 +292,7 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM final double effectiveThumbSizeValue = widget.thumbSizeValue ?? effectiveMoonSwitchSize.thumbSizeValue; - final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; + final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; final EdgeInsetsGeometry effectivePadding = widget.padding ?? effectiveMoonSwitchSize.padding; @@ -304,22 +305,23 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM final Duration effectiveDuration = widget.duration ?? context.moonTheme?.switchTheme.properties.transitionDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; - final Curve effectiveTransitionCurve = - widget.curve ?? context.moonTheme?.switchTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final Curve effectiveTransitionCurve = widget.curve ?? + context.moonTheme?.switchTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; - final double effectiveFocusEffectExtent = - context.moonEffects?.controlFocusEffect.effectExtent ?? MoonFocusEffects.lightFocusEffect.effectExtent; + final double effectiveFocusEffectExtent = context.moonEffects?.controlFocusEffect.effectExtent ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectExtent; - final Color effectiveFocusEffectColor = - context.moonEffects?.controlFocusEffect.effectColor ?? MoonFocusEffects.lightFocusEffect.effectColor; + final Color effectiveFocusEffectColor = context.moonEffects?.controlFocusEffect.effectColor ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectColor; - final Duration effectiveFocusEffectDuration = - context.moonEffects?.controlFocusEffect.effectDuration ?? MoonFocusEffects.lightFocusEffect.effectDuration; + final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectDuration; - final Curve effectiveFocusEffectCurve = - context.moonEffects?.controlFocusEffect.effectCurve ?? MoonFocusEffects.lightFocusEffect.effectCurve; + final Curve effectiveFocusEffectCurve = context.moonEffects?.controlFocusEffect.effectCurve ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectCurve; _animationController ??= AnimationController( vsync: this, @@ -383,19 +385,19 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM ); final Color effectiveActiveTextColor = - context.moonTheme?.switchTheme.colors.activeTextColor ?? MoonTypography.dark.colors.bodyPrimary; + context.moonTheme?.switchTheme.colors.activeTextColor ?? MoonTokens.dark.colors.textPrimary; final Color effectiveInactiveTextColor = - context.moonTheme?.switchTheme.colors.inactiveTextColor ?? MoonTypography.light.colors.bodyPrimary; + context.moonTheme?.switchTheme.colors.inactiveTextColor ?? MoonColors.light.textPrimary; final Color effectiveActiveIconColor = - context.moonTheme?.switchTheme.colors.activeIconColor ?? MoonIconTheme.dark.colors.primaryColor; + context.moonTheme?.switchTheme.colors.activeIconColor ?? MoonTokens.dark.colors.iconPrimary; final Color effectiveInactiveIconColor = - context.moonTheme?.switchTheme.colors.inactiveIconColor ?? MoonIconTheme.light.colors.primaryColor; + context.moonTheme?.switchTheme.colors.inactiveIconColor ?? MoonColors.light.iconPrimary; final Color effectiveThumbIconColor = - context.moonTheme?.switchTheme.colors.thumbIconColor ?? MoonIconTheme.light.colors.primaryColor; + context.moonTheme?.switchTheme.colors.thumbIconColor ?? MoonColors.light.iconPrimary; return Semantics( label: widget.semanticLabel, diff --git a/lib/src/widgets/tab_bar/tab_bar.dart b/lib/src/widgets/tab_bar/tab_bar.dart index 1bdd9369..794f42a9 100644 --- a/lib/src/widgets/tab_bar/tab_bar.dart +++ b/lib/src/widgets/tab_bar/tab_bar.dart @@ -1,10 +1,12 @@ import 'package:flutter/material.dart'; -import 'package:moon_design/src/theme/colors.dart'; -import 'package:moon_design/src/theme/sizes.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_size_properties.dart'; +import 'package:moon_design/src/theme/tab_bar/tab_bar_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -152,11 +154,11 @@ class _MoonTabBarState extends State { MoonTabBarSizeProperties _getMoonTabBarSize(BuildContext context, MoonTabBarSize? tabBarSize) { switch (tabBarSize) { case MoonTabBarSize.sm: - return context.moonTheme?.tabBarTheme.sizes.sm ?? MoonTabBarSizeProperties.sm; + return context.moonTheme?.tabBarTheme.sizes.sm ?? MoonTabBarSizes(tokens: MoonTokens.light).sm; case MoonTabBarSize.md: - return context.moonTheme?.tabBarTheme.sizes.md ?? MoonTabBarSizeProperties.md; + return context.moonTheme?.tabBarTheme.sizes.md ?? MoonTabBarSizes(tokens: MoonTokens.light).md; default: - return context.moonTheme?.tabBarTheme.sizes.md ?? MoonTabBarSizeProperties.md; + return context.moonTheme?.tabBarTheme.sizes.md ?? MoonTabBarSizes(tokens: MoonTokens.light).md; } } @@ -250,10 +252,11 @@ class _MoonTabBarState extends State { _effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.tabBarTheme.properties.transitionDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; - _effectiveTransitionCurve = - widget.transitionCurve ?? context.moonTheme?.tabBarTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + _effectiveTransitionCurve = widget.transitionCurve ?? + context.moonTheme?.tabBarTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; final double effectiveHeight = widget.height ?? _effectiveMoonTabBarSize.height; @@ -350,7 +353,7 @@ class _IndicatorTabBuilderState extends State<_IndicatorTabBuilder> with SingleT final Color effectiveTextColor = tabStyle?.textStyle?.color ?? tabStyle?.textColor ?? context.moonTheme?.tabBarTheme.colors.textColor ?? - MoonTypography.light.colors.bodyPrimary; + MoonColors.light.textPrimary; final Color effectiveSelectedTextColor = tabStyle?.selectedTextColor ?? context.moonTheme?.tabBarTheme.colors.selectedTextColor ?? @@ -550,11 +553,11 @@ class _PillTabBuilderState extends State<_PillTabBuilder> with SingleTickerProvi final Color effectiveTextColor = tabStyle?.textStyle?.color ?? tabStyle?.textColor ?? context.moonTheme?.tabBarTheme.colors.textColor ?? - MoonTypography.light.colors.bodyPrimary; + MoonColors.light.textPrimary; final Color effectiveSelectedTextColor = tabStyle?.selectedTextColor ?? context.moonTheme?.tabBarTheme.colors.selectedPillTextColor ?? - MoonTypography.light.colors.bodyPrimary; + MoonColors.light.textPrimary; final TextStyle effectiveTextStyle = widget.moonTabBarSizeProperties.textStyle.merge(tabStyle?.textStyle); diff --git a/lib/src/widgets/tag/tag.dart b/lib/src/widgets/tag/tag.dart index c6bd82a5..c5dcd9a7 100644 --- a/lib/src/widgets/tag/tag.dart +++ b/lib/src/widgets/tag/tag.dart @@ -1,10 +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/tag/tag_size_properties.dart'; +import 'package:moon_design/src/theme/tag/tag_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -83,11 +83,11 @@ class MoonTag extends StatelessWidget { MoonTagSizeProperties _getMoonTagSize(BuildContext context, MoonTagSize? moonTagSize) { switch (moonTagSize) { case MoonTagSize.x2s: - return context.moonTheme?.tagTheme.sizes.x2s ?? MoonTagSizeProperties.x2s; + return context.moonTheme?.tagTheme.sizes.x2s ?? MoonTagSizes(tokens: MoonTokens.light).x2s; case MoonTagSize.xs: - return context.moonTheme?.tagTheme.sizes.xs ?? MoonTagSizeProperties.xs; + return context.moonTheme?.tagTheme.sizes.xs ?? MoonTagSizes(tokens: MoonTokens.light).xs; default: - return context.moonTheme?.tagTheme.sizes.xs ?? MoonTagSizeProperties.xs; + return context.moonTheme?.tagTheme.sizes.xs ?? MoonTagSizes(tokens: MoonTokens.light).xs; } } @@ -100,11 +100,9 @@ class MoonTag extends StatelessWidget { final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.tagTheme.colors.backgroundColor ?? MoonColors.light.gohan; - final Color effectiveTextColor = - context.moonTheme?.tagTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + final Color effectiveTextColor = context.moonTheme?.tagTheme.colors.textColor ?? MoonColors.light.textPrimary; - final Color effectiveIconColor = - context.moonTheme?.tagTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; + final Color effectiveIconColor = context.moonTheme?.tagTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final double effectiveHeight = height ?? effectiveMoonTagSize.height; diff --git a/lib/src/widgets/text_area/text_area.dart b/lib/src/widgets/text_area/text_area.dart index 237f48f5..96597429 100644 --- a/lib/src/widgets/text_area/text_area.dart +++ b/lib/src/widgets/text_area/text_area.dart @@ -1,10 +1,11 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; -import 'package:moon_design/src/theme/colors.dart'; -import 'package:moon_design/src/theme/sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/sizes.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/widgets/text_input/form_text_input.dart'; typedef MoonTextAreaErrorBuilder = Widget Function(BuildContext context, String? errorText); @@ -288,23 +289,19 @@ class MoonTextArea extends StatelessWidget { final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.textAreaTheme.colors.backgroundColor ?? MoonColors.light.gohan; - final Color effectiveActiveBorderColor = activeBorderColor ?? - context.moonTheme?.textAreaTheme.colors.activeBorderColor ?? - MoonColors.light.piccolo; + final Color effectiveActiveBorderColor = + activeBorderColor ?? context.moonTheme?.textAreaTheme.colors.activeBorderColor ?? MoonColors.light.piccolo; - final Color effectiveInactiveBorderColor = inactiveBorderColor ?? - context.moonTheme?.textAreaTheme.colors.inactiveBorderColor ?? - MoonColors.light.beerus; + final Color effectiveInactiveBorderColor = + inactiveBorderColor ?? context.moonTheme?.textAreaTheme.colors.inactiveBorderColor ?? MoonColors.light.beerus; - final Color effectiveErrorBorderColor = errorBorderColor ?? - context.moonTheme?.textAreaTheme.colors.errorBorderColor ?? - MoonColors.light.chiChi100; + final Color effectiveErrorBorderColor = + errorBorderColor ?? context.moonTheme?.textAreaTheme.colors.errorBorderColor ?? MoonColors.light.chiChi100; final Color effectiveHoverBorderColor = hoverBorderColor ?? context.moonTheme?.textInputTheme.colors.hoverBorderColor ?? MoonColors.light.beerus; - final Color effectiveTextColor = - textColor ?? context.moonTypography?.colors.bodyPrimary ?? MoonTypography.light.colors.bodyPrimary; + final Color effectiveTextColor = textColor ?? context.moonColors?.textPrimary ?? MoonColors.light.textPrimary; final Color effectiveHintTextColor = hintTextColor ?? context.moonTheme?.textAreaTheme.colors.hintTextColor ?? MoonColors.light.trunks; @@ -317,18 +314,19 @@ class MoonTextArea extends StatelessWidget { textPadding ?? context.moonTheme?.textAreaTheme.properties.textPadding ?? const EdgeInsets.all(16); final TextStyle effectiveTextStyle = - textStyle ?? context.moonTheme?.textAreaTheme.properties.textStyle ?? const TextStyle(fontSize: 16); + textStyle ?? context.moonTheme?.textAreaTheme.properties.textStyle ?? MoonTypography.typography.body.text16; final TextStyle effectiveHelperTextStyle = helperTextStyle ?? context.moonTheme?.textAreaTheme.properties.helperTextStyle ?? - const TextStyle(fontSize: 12); + MoonTypography.typography.body.text12; final Duration effectiveTransitionDuration = transitionDuration ?? context.moonTheme?.textAreaTheme.properties.transitionDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; - final Curve effectiveTransitionCurve = - transitionCurve ?? context.moonTheme?.textAreaTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final Curve effectiveTransitionCurve = transitionCurve ?? + context.moonTheme?.textAreaTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; return MoonFormTextInput( activeBorderColor: effectiveActiveBorderColor, diff --git a/lib/src/widgets/text_input/text_input.dart b/lib/src/widgets/text_input/text_input.dart index b4f877e6..c1643325 100644 --- a/lib/src/widgets/text_input/text_input.dart +++ b/lib/src/widgets/text_input/text_input.dart @@ -8,14 +8,16 @@ import 'package:flutter/material.dart' import 'package:flutter/rendering.dart'; import 'package:flutter/services.dart'; -import 'package:moon_design/src/theme/borders.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/opacity.dart'; -import 'package:moon_design/src/theme/sizes.dart'; +import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/text_input/text_input_size_properties.dart'; +import 'package:moon_design/src/theme/text_input/text_input_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/theme/typography/typography.dart'; +import 'package:moon_design/src/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/opacities.dart'; +import 'package:moon_design/src/theme/tokens/sizes.dart'; +import 'package:moon_design/src/theme/tokens/tokens.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -958,15 +960,15 @@ class _MoonTextInputState extends State MoonTextInputSizeProperties _getMoonTextInputSize(BuildContext context, MoonTextInputSize? moonTextInputSize) { switch (moonTextInputSize) { case MoonTextInputSize.sm: - return context.moonTheme?.textInputTheme.sizes.sm ?? MoonTextInputSizeProperties.sm; + return context.moonTheme?.textInputTheme.sizes.sm ?? MoonTextInputSizes(tokens: MoonTokens.light).sm; case MoonTextInputSize.md: - return context.moonTheme?.textInputTheme.sizes.md ?? MoonTextInputSizeProperties.md; + return context.moonTheme?.textInputTheme.sizes.md ?? MoonTextInputSizes(tokens: MoonTokens.light).md; case MoonTextInputSize.lg: - return context.moonTheme?.textInputTheme.sizes.lg ?? MoonTextInputSizeProperties.lg; + return context.moonTheme?.textInputTheme.sizes.lg ?? MoonTextInputSizes(tokens: MoonTokens.light).lg; case MoonTextInputSize.xl: - return context.moonTheme?.textInputTheme.sizes.xl ?? MoonTextInputSizeProperties.xl; + return context.moonTheme?.textInputTheme.sizes.xl ?? MoonTextInputSizes(tokens: MoonTokens.light).xl; default: - return context.moonTheme?.textInputTheme.sizes.md ?? MoonTextInputSizeProperties.md; + return context.moonTheme?.textInputTheme.sizes.md ?? MoonTextInputSizes(tokens: MoonTokens.light).md; } } @@ -1131,7 +1133,7 @@ class _MoonTextInputState extends State context.isDarkMode ? effectiveErrorBorderColor.withOpacity(0.4) : effectiveErrorBorderColor.withOpacity(0.2); final Color effectiveTextColor = - widget.textColor ?? context.moonTypography?.colors.bodyPrimary ?? MoonTypography.light.colors.bodyPrimary; + widget.textColor ?? context.moonColors?.textPrimary ?? MoonColors.light.textPrimary; final Color effectiveHintTextColor = widget.hintTextColor ?? context.moonTheme?.textInputTheme.colors.supportingTextColor ?? MoonColors.light.trunks; @@ -1140,17 +1142,18 @@ class _MoonTextInputState extends State final double effectiveHeight = widget.height ?? effectiveMoonTextInputSize.height; - final double effectiveDisabledOpacityValue = context.moonTheme?.opacity.disabled ?? MoonOpacity.opacities.disabled; + final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; - final double effectiveFocusEffectExtent = - context.moonEffects?.controlFocusEffect.effectExtent ?? MoonFocusEffects.lightFocusEffect.effectExtent; + final double effectiveFocusEffectExtent = context.moonEffects?.controlFocusEffect.effectExtent ?? + MoonEffectsTheme(tokens: MoonTokens.light).controlFocusEffect.effectExtent; final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.textInputTheme.properties.transitionDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; - final Curve effectiveTransitionCurve = - widget.transitionCurve ?? context.moonTheme?.textInputTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final Curve effectiveTransitionCurve = widget.transitionCurve ?? + context.moonTheme?.textInputTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; final EdgeInsetsGeometry effectivePadding = widget.padding ?? effectiveMoonTextInputSize.padding; diff --git a/lib/src/widgets/toast/toast.dart b/lib/src/widgets/toast/toast.dart index a5328587..cfe98081 100644 --- a/lib/src/widgets/toast/toast.dart +++ b/lib/src/widgets/toast/toast.dart @@ -2,14 +2,13 @@ import 'dart:async'; 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/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/shadows.dart'; +import 'package:moon_design/src/theme/tokens/sizes.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; @@ -105,15 +104,15 @@ class MoonToast { : (context.moonTheme?.toastTheme.colors.darkVariantBackgroundColor ?? MoonColors.dark.gohan)); final Color effectiveTextColor = variant == MoonToastVariant.original - ? (context.moonTheme?.toastTheme.colors.lightVariantTextColor ?? MoonTypography.light.colors.bodyPrimary) - : (context.moonTheme?.toastTheme.colors.darkVariantTextColor ?? MoonTypography.dark.colors.bodyPrimary); + ? (context.moonTheme?.toastTheme.colors.lightVariantTextColor ?? MoonColors.light.textPrimary) + : (context.moonTheme?.toastTheme.colors.darkVariantTextColor ?? MoonColors.dark.textPrimary); final Color effectiveIconColor = variant == MoonToastVariant.original - ? (context.moonTheme?.toastTheme.colors.lightVariantIconColor ?? MoonIconTheme.light.colors.primaryColor) - : (context.moonTheme?.toastTheme.colors.darkVariantIconColor ?? MoonIconTheme.dark.colors.primaryColor); + ? (context.moonTheme?.toastTheme.colors.lightVariantIconColor ?? MoonColors.light.iconPrimary) + : (context.moonTheme?.toastTheme.colors.darkVariantIconColor ?? MoonColors.dark.iconPrimary); final TextStyle effectiveTextStyle = - context.moonTheme?.toastTheme.properties.textStyle ?? MoonTextStyles.body.textDefault; + context.moonTheme?.toastTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; final double effectiveGap = gap ?? context.moonTheme?.toastTheme.properties.gap ?? MoonSizes.sizes.x2s; @@ -123,10 +122,11 @@ class MoonToast { final Duration effectiveTransitionDuration = transitionDuration ?? context.moonTheme?.toastTheme.properties.transitionDuration ?? - const Duration(milliseconds: 200); + MoonTransitions.transitions.defaultTransitionDuration; - final Curve effectiveTransitionCurve = - transitionCurve ?? context.moonTheme?.toastTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final Curve effectiveTransitionCurve = transitionCurve ?? + context.moonTheme?.toastTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; final EdgeInsetsGeometry effectiveContentPadding = padding ?? context.moonTheme?.toastTheme.properties.contentPadding ?? EdgeInsets.all(MoonSizes.sizes.x2s); diff --git a/lib/src/widgets/tooltip/tooltip.dart b/lib/src/widgets/tooltip/tooltip.dart index c7d972c8..5bd50fca 100644 --- a/lib/src/widgets/tooltip/tooltip.dart +++ b/lib/src/widgets/tooltip/tooltip.dart @@ -1,12 +1,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/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/theme/tokens/borders.dart'; +import 'package:moon_design/src/theme/tokens/colors.dart'; +import 'package:moon_design/src/theme/tokens/shadows.dart'; +import 'package:moon_design/src/theme/tokens/transitions.dart'; +import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/widgets/tooltip/tooltip_shape.dart'; @@ -392,11 +391,9 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.tooltipTheme.colors.backgroundColor ?? MoonColors.light.gohan; - final Color effectiveTextColor = - context.moonTheme?.tooltipTheme.colors.textColor ?? MoonTypography.light.colors.bodyPrimary; + final Color effectiveTextColor = context.moonTheme?.tooltipTheme.colors.textColor ?? MoonColors.light.textPrimary; - final Color effectiveIconColor = - context.moonTheme?.tooltipTheme.colors.iconColor ?? MoonIconTheme.light.colors.primaryColor; + final Color effectiveIconColor = context.moonTheme?.tooltipTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final double effectiveArrowBaseWidth = widget.arrowBaseWidth ?? context.moonTheme?.tooltipTheme.properties.arrowBaseWidth ?? 16; @@ -416,7 +413,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 ?? MoonTextStyles.body.text12; + context.moonTheme?.tooltipTheme.properties.textStyle ?? MoonTypography.typography.body.text12; final overlayRenderBox = Overlay.of(context).context.findRenderObject()! as RenderBox; @@ -527,8 +524,9 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker context.moonTheme?.tooltipTheme.properties.transitionDuration ?? const Duration(milliseconds: 150); - final Curve effectiveTransitionCurve = - widget.transitionCurve ?? context.moonTheme?.tooltipTheme.properties.transitionCurve ?? Curves.easeInOutCubic; + final Curve effectiveTransitionCurve = widget.transitionCurve ?? + context.moonTheme?.tooltipTheme.properties.transitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve; _animationController ??= AnimationController( duration: effectiveTransitionDuration,