fix: [MDS-409] Improve theming (#70)

coingaming · Mar 9, 2023 · a8523a5 · a8523a5
1 parent 3fac8d4
commit a8523a5
Show file tree

Hide file tree

Showing 72 changed files with 2,460 additions and 1,273 deletions.
diff --git a/example/lib/src/storybook/common/widgets/text_divider.dart b/example/lib/src/storybook/common/widgets/text_divider.dart
@@ -19,7 +19,7 @@ class TextDivider extends StatelessWidget {
           padding: const EdgeInsets.symmetric(horizontal: 16.0),
           child: Text(
             text,
-            style: context.moonTypography!.text.text12.copyWith(color: context.moonColors!.trunks),
+            style: context.moonTypography?.body.text12.copyWith(color: context.moonColors?.trunks),
           ),
         ),
         const Expanded(child: Divider()),

diff --git a/example/lib/src/storybook/common/widgets/version.dart b/example/lib/src/storybook/common/widgets/version.dart
@@ -38,10 +38,10 @@ class _MoonVersionWidgetState extends State<MoonVersionWidget> {
             const SizedBox(width: 8.0),
             Text(
               "Moon Design",
-              style: MoonTypography.textStyles.text.text16,
+              style: MoonTextStyles.heading.text16,
             ),
             const SizedBox(width: 6.0),
-            Text("v$_version", style: MoonTypography.textStyles.heading.text16),
+            Text("v$_version", style: MoonTextStyles.heading.text16),
           ],
         ),
       ),

diff --git a/example/lib/src/storybook/stories/avatar.dart b/example/lib/src/storybook/stories/avatar.dart
@@ -9,6 +9,11 @@ class AvatarStory extends Story {
       : super(
           name: "Avatar",
           builder: (context) {
+            final customLabelTextKnob = context.knobs.text(
+              label: "Custom label text",
+              initial: "MD",
+            );
+
             final avatarSizesKnob = context.knobs.options(
               label: "avatarSize",
               description: "Avatar size variants.",
@@ -23,16 +28,6 @@ class AvatarStory extends Story {
               ],
             );
 
-            final setRtlModeKnob = context.knobs.boolean(
-              label: "RTL mode",
-              description: "Switch between LTR and RTL modes.",
-            );
-
-            final customLabelTextKnob = context.knobs.text(
-              label: "Custom label text",
-              initial: "MD",
-            );
-
             final avatarBackgroundColorKnob = context.knobs.options(
               label: "backgroundColor",
               description: "MoonColors variants for Avatar background.",
@@ -42,18 +37,14 @@ class AvatarStory extends Story {
 
             final backgroundColor = colorTable(context)[avatarBackgroundColorKnob];
 
-            final borderRadiusKnob = context.knobs.sliderInt(
-              max: 32,
-              initial: 8,
-              label: "borderRadius",
-              description: "Border radius for the Avatar.",
+            final badgeColorKnob = context.knobs.options(
+              label: "badgeColor",
+              description: "MoonColors variants for the Avatar badge.",
+              initial: 18, // roshi100
+              options: colorOptions,
             );
 
-            final showBadgeKnob = context.knobs.boolean(
-              label: "showBadge",
-              description: "Show Avatar badge.",
-              initial: true,
-            );
+            final badgeColor = colorTable(context)[badgeColorKnob];
 
             final avatarBadgeAlignmentKnob = context.knobs.options(
               label: "badgeAlignment",
@@ -67,14 +58,23 @@ class AvatarStory extends Story {
               ],
             );
 
-            final badgeColorKnob = context.knobs.options(
-              label: "badgeColor",
-              description: "MoonColors variants for the Avatar badge.",
-              initial: 18, // roshi100
-              options: colorOptions,
+            final borderRadiusKnob = context.knobs.sliderInt(
+              max: 32,
+              initial: 8,
+              label: "borderRadius",
+              description: "Border radius for the Avatar.",
             );
 
-            final badgeColor = colorTable(context)[badgeColorKnob];
+            final showBadgeKnob = context.knobs.boolean(
+              label: "showBadge",
+              description: "Show Avatar badge.",
+              initial: true,
+            );
+
+            final setRtlModeKnob = context.knobs.boolean(
+              label: "RTL mode",
+              description: "Switch between LTR and RTL modes.",
+            );
 
             return Directionality(
               textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,

diff --git a/example/lib/src/storybook/stories/button.dart b/example/lib/src/storybook/stories/button.dart
@@ -14,6 +14,19 @@ class ButtonStory extends Story {
               initial: "MoonButton",
             );
 
+            final buttonSizesKnob = context.knobs.options(
+              label: "MoonButtonSize",
+              description: "Button size variants.",
+              initial: MoonButtonSize.md,
+              options: const [
+                Option(label: "xs", value: MoonButtonSize.xs),
+                Option(label: "sm", value: MoonButtonSize.sm),
+                Option(label: "md", value: MoonButtonSize.md),
+                Option(label: "lg", value: MoonButtonSize.lg),
+                Option(label: "xl", value: MoonButtonSize.xl)
+              ],
+            );
+
             final colorsKnob = context.knobs.options(
               label: "backgroundColor",
               description: "MoonColors variants for base MoonButton.",
@@ -23,35 +36,37 @@ class ButtonStory extends Story {
 
             final color = colorTable(context)[colorsKnob];
 
+            final borderRadiusKnob = context.knobs.sliderInt(
+              max: 28,
+              initial: 8,
+              label: "borderRadius",
+              description: "Border radius for base MoonButton.",
+            );
+
             final showBorderKnob = context.knobs.boolean(
               label: "showBorder",
               description: "Show border for base MoonButton.",
               initial: true,
             );
 
-            final borderRadiusKnob = context.knobs.sliderInt(
-              max: 28,
-              initial: 8,
-              label: "borderRadius",
-              description: "Border radius for base MoonButton.",
+            final showDisabledKnob = context.knobs.boolean(
+              label: "Disabled",
+              description: "onTap() or onLongPress() is null.",
             );
 
-            final buttonSizesKnob = context.knobs.options(
-              label: "MoonButtonSize",
-              description: "Button size variants.",
-              initial: MoonButtonSize.md,
-              options: const [
-                Option(label: "xs", value: MoonButtonSize.xs),
-                Option(label: "sm", value: MoonButtonSize.sm),
-                Option(label: "md", value: MoonButtonSize.md),
-                Option(label: "lg", value: MoonButtonSize.lg),
-                Option(label: "xl", value: MoonButtonSize.xl)
-              ],
+            final setFullWidthKnob = context.knobs.boolean(
+              label: "isFullWidth",
+              description: "Set Button to full width.",
             );
 
-            final setRtlModeKnob = context.knobs.boolean(
-              label: "RTL mode",
-              description: "Switch between LTR and RTL modes.",
+            final showPulseEffectKnob = context.knobs.boolean(
+              label: "showPulseEffect",
+              description: "Show pulse animation.",
+            );
+
+            final showPulseEffectJiggleKnob = context.knobs.boolean(
+              label: "showPulseEffectJiggle",
+              description: "Show jiggling with pulse animation.",
             );
 
             final showLeftIconKnob = context.knobs.boolean(
@@ -71,24 +86,9 @@ class ButtonStory extends Story {
               description: "Show widget in the rightIcon slot.",
             );
 
-            final showPulseEffectKnob = context.knobs.boolean(
-              label: "showPulseEffect",
-              description: "Show pulse animation.",
-            );
-
-            final showPulseEffectJiggleKnob = context.knobs.boolean(
-              label: "showPulseEffectJiggle",
-              description: "Show jiggling with pulse animation.",
-            );
-
-            final showDisabledKnob = context.knobs.boolean(
-              label: "Disabled",
-              description: "onTap() or onLongPress() is null.",
-            );
-
-            final setFullWidthKnob = context.knobs.boolean(
-              label: "isFullWidth",
-              description: "Set Button to full width.",
+            final setRtlModeKnob = context.knobs.boolean(
+              label: "RTL mode",
+              description: "Switch between LTR and RTL modes.",
             );
 
             IconData resolveIconVariant(MoonButtonSize buttonSize) {

diff --git a/example/lib/src/storybook/stories/chip.dart b/example/lib/src/storybook/stories/chip.dart
@@ -14,6 +14,16 @@ class ChipStory extends Story {
               initial: "MoonChip",
             );
 
+            final chipSizesKnob = context.knobs.options(
+              label: "MoonChipSize",
+              description: "Chip size variants.",
+              initial: MoonChipSize.md,
+              options: const [
+                Option(label: "sm", value: MoonChipSize.sm),
+                Option(label: "md", value: MoonChipSize.md),
+              ],
+            );
+
             final colorsKnob = context.knobs.options(
               label: "backgroundColor",
               description: "MoonColors variants for the Chip.",
@@ -23,36 +33,21 @@ class ChipStory extends Story {
 
             final color = colorTable(context)[colorsKnob];
 
-            final isActiveKnob = context.knobs.boolean(
-              label: "isActive",
-              description: "Whether the Chip is active/selected.",
-            );
-
-            final showBorderKnob = context.knobs.boolean(
-              label: "showBorder",
-              description: "Show border when isActive.",
-            );
-
             final borderRadiusKnob = context.knobs.sliderInt(
               max: 28,
               initial: 8,
               label: "borderRadius",
               description: "Border radius for the Chip.",
             );
 
-            final chipSizesKnob = context.knobs.options(
-              label: "MoonChipSize",
-              description: "Chip size variants.",
-              initial: MoonChipSize.md,
-              options: const [
-                Option(label: "sm", value: MoonChipSize.sm),
-                Option(label: "md", value: MoonChipSize.md),
-              ],
+            final showBorderKnob = context.knobs.boolean(
+              label: "showBorder",
+              description: "Show border when isActive.",
             );
 
-            final setRtlModeKnob = context.knobs.boolean(
-              label: "RTL mode",
-              description: "Switch between LTR and RTL modes.",
+            final isActiveKnob = context.knobs.boolean(
+              label: "isActive",
+              description: "Whether the Chip is active/selected.",
             );
 
             final showLeftIconKnob = context.knobs.boolean(
@@ -72,6 +67,11 @@ class ChipStory extends Story {
               description: "Show widget in the rightIcon slot.",
             );
 
+            final setRtlModeKnob = context.knobs.boolean(
+              label: "RTL mode",
+              description: "Switch between LTR and RTL modes.",
+            );
+
             final resolvedIconVariant =
                 chipSizesKnob == MoonChipSize.md ? MoonIconsOther.frame24 : MoonIconsOther.frame16;
 

diff --git a/example/lib/src/storybook/stories/tag.dart b/example/lib/src/storybook/stories/tag.dart
@@ -13,6 +13,16 @@ class TagStory extends Story {
               initial: "MoonTag",
             );
 
+            final tagSizesKnob = context.knobs.options(
+              label: "tagSize",
+              description: "Tag size variants.",
+              initial: MoonTagSize.xs,
+              options: const [
+                Option(label: "x2s", value: MoonTagSize.x2s),
+                Option(label: "xs", value: MoonTagSize.xs),
+              ],
+            );
+
             final colorsKnob = context.knobs.options(
               label: "backgroundColor",
               description: "MoonColors variants for Tag.",
@@ -29,21 +39,6 @@ class TagStory extends Story {
               description: "Border radius for Tag.",
             );
 
-            final tagSizesKnob = context.knobs.options(
-              label: "tagSize",
-              description: "Tag size variants.",
-              initial: MoonTagSize.xs,
-              options: const [
-                Option(label: "x2s", value: MoonTagSize.x2s),
-                Option(label: "xs", value: MoonTagSize.xs),
-              ],
-            );
-
-            final setRtlModeKnob = context.knobs.boolean(
-              label: "RTL mode",
-              description: "Switch between LTR and RTL modes.",
-            );
-
             final setUpperCase = context.knobs.boolean(
               label: "isUpperCase",
               description: "Sets the text style of the Tag to upper case.",
@@ -60,8 +55,16 @@ class TagStory extends Story {
               initial: true,
             );
 
-            final showRightIconKnob = context.knobs
-                .boolean(label: "Show rightIcon", description: "Show widget in the rightIcon slot.", initial: true);
+            final showRightIconKnob = context.knobs.boolean(
+              label: "Show rightIcon",
+              description: "Show widget in the rightIcon slot.",
+              initial: true,
+            );
+
+            final setRtlModeKnob = context.knobs.boolean(
+              label: "RTL mode",
+              description: "Switch between LTR and RTL modes.",
+            );
 
             return Directionality(
               textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,

diff --git a/lib/moon_design.dart b/lib/moon_design.dart
@@ -1,34 +1,24 @@
 library moon_design;
 
-export 'package:moon_design/src/theme/avatar/avatar_sizes.dart';
 export 'package:moon_design/src/theme/avatar/avatar_theme.dart';
 export 'package:moon_design/src/theme/borders.dart';
-export 'package:moon_design/src/theme/button/button_sizes.dart';
 export 'package:moon_design/src/theme/button/button_theme.dart';
-export 'package:moon_design/src/theme/chip/chip_sizes.dart';
 export 'package:moon_design/src/theme/chip/chip_theme.dart';
 export 'package:moon_design/src/theme/colors.dart';
-export 'package:moon_design/src/theme/effects/controls_effects.dart';
 export 'package:moon_design/src/theme/effects/effects.dart';
-export 'package:moon_design/src/theme/effects/focus_effects.dart';
-export 'package:moon_design/src/theme/effects/hover_effects.dart';
-export 'package:moon_design/src/theme/loaders/circular_loader_sizes.dart';
-export 'package:moon_design/src/theme/loaders/circular_loader_theme.dart';
-export 'package:moon_design/src/theme/loaders/linear_loader_sizes.dart';
-export 'package:moon_design/src/theme/loaders/linear_loader_theme.dart';
+export 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_theme.dart';
+export 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_theme.dart';
 export 'package:moon_design/src/theme/opacity.dart';
-export 'package:moon_design/src/theme/progress/circular_progress_sizes.dart';
-export 'package:moon_design/src/theme/progress/circular_progress_theme.dart';
-export 'package:moon_design/src/theme/progress/linear_progress_sizes.dart';
-export 'package:moon_design/src/theme/progress/linear_progress_theme.dart';
+export 'package:moon_design/src/theme/progress/circular_progress/circular_progress_theme.dart';
+export 'package:moon_design/src/theme/progress/linear_progress/linear_progress_theme.dart';
 export 'package:moon_design/src/theme/shadows.dart';
 export 'package:moon_design/src/theme/sizes.dart';
 export 'package:moon_design/src/theme/theme.dart';
-export 'package:moon_design/src/theme/tooltip/tooltip.dart';
+export 'package:moon_design/src/theme/tooltip/tooltip_properties.dart';
+export 'package:moon_design/src/theme/typography/text_colors.dart';
 export 'package:moon_design/src/theme/typography/text_styles.dart';
 export 'package:moon_design/src/theme/typography/typography.dart';
 
-export 'package:moon_design/src/utils/animated_icon_theme.dart';
 export 'package:moon_design/src/utils/extensions.dart';
 export 'package:moon_design/src/utils/measure_size.dart';
 export 'package:moon_design/src/utils/widget_surveyor.dart';
@@ -41,12 +31,13 @@ export 'package:moon_design/src/widgets/buttons/secondary_button.dart';
 export 'package:moon_design/src/widgets/buttons/tertiary_button.dart';
 export 'package:moon_design/src/widgets/chips/chip.dart';
 export 'package:moon_design/src/widgets/chips/ghost_chip.dart';
+export 'package:moon_design/src/widgets/common/animated_icon_theme.dart';
 export 'package:moon_design/src/widgets/common/base_control.dart';
-export 'package:moon_design/src/widgets/common/icons.dart';
+export 'package:moon_design/src/widgets/common/effects/focus_effect.dart';
+export 'package:moon_design/src/widgets/common/effects/pulse_effect.dart';
+export 'package:moon_design/src/widgets/common/icons/icons.dart';
 export 'package:moon_design/src/widgets/common/progress_indicators/circular_progress_indicator.dart';
 export 'package:moon_design/src/widgets/common/progress_indicators/linear_progress_indicator.dart';
-export 'package:moon_design/src/widgets/effects/focus_effect.dart';
-export 'package:moon_design/src/widgets/effects/pulse_effect.dart';
 export 'package:moon_design/src/widgets/loaders/circular_loader.dart';
 export 'package:moon_design/src/widgets/loaders/linear_loader.dart';
 export 'package:moon_design/src/widgets/progress/circular_progress.dart';